javascript - Why does the duration before the callback keep increasing?

Question

In the process of toying with some jQuery animations, I've managed to get myself into a bit of a bind (where I can't use .unbind()).

I have a set of "inactive" blocks in div#tray that I would like to be able to swap with the "active" block in div#main by clicking on them. Animating the blocks out always happens immediately when I click them, but the more swaps I make, the longer it takes to get to the swap-and-animate-in function. Eventually it falls apart as steps apparently get skipped.

I don't understand why this is (some sort of timing problem?), so I've written a jsFiddle with my code, and would appreciate any insight.

Answer 1

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

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

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

Answer 2

我已经更新了你的代码。

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

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

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