为什么回调前的持续时间不断增加？

Question

在玩弄一些jQuery动画的过程中，我设法让自己陷入了一种束缚（我无法使用.unbind()）。

我在div#tray中有一组“非活动”块，我希望能够通过点击它们与div#main中的“活动”块交换。当我点击它们时，动画块总是立即发生，但是我做的交换越多，到达交换和动画输入功能所需的时间就越长。最终它会因为显然被跳过而分崩离析。

我不明白为什么会这样（某种时间问题？），所以我用我的代码写了一个jsFiddle，并希望有任何见解。

Answer 1

每次动画结束时，您都会附加点击事件。这些只是简单地叠加并导致减速。解决此问题的最简单方法是在重新绑定之前取消绑定所有点击。

function setupActiveBlockSwitcher() {
    $('.block').unbind('click');
    ...

这是一个解决方案，但不是那么好，重新组织代码会更好，这样您就不必在每次动画完成时重新绑定事件。

Answer 2

我有updated your code。

主要问题是您反复为块分配事件处理程序，尤其是在给定迭代中未被单击的块。

使用此更新代码，我将click处理程序应用于容器本身，然后使用event.target获取实际单击的块。

我还从动画功能中删除了“重新设置”代码。