为什么这个setTimeout代码会建立而不是终止？

Question

如果您单击html的正文一次，然后等到球不在屏幕上就好了。 但是如果你点击2次以上，你会注意到球的移动速度更快。 当您再次单击身体以使球返回时，它仍然比应该的要快。 为什么？ http://jsfiddle.net/44nwt/10/

在页面上的firefox中编辑（我还没有在jsfiddle上尝试过），我注意到即使在球离开屏幕并被移走后，移动函数也被重复调用。 为什么不存在？

Answer 1

if (left > parseInt($('.ballwrapper').css('width'))) {
    //alert('removed');
    $('.ball').remove();
    return;
}

如果left未定义（即，球已经被移除）则条件为假并且将重复进行调度

Answer 2

这有效（http://jsfiddle.net/44nwt/11/）

有两个问题：

＃1每次单击都会创建另一个ball和ballwrapper实例，并将它们添加到主体中。 如果实例尚不存在，则只需创建实例。 所以这看起来像这样：

 $('body').click(function() {
    var wrapper = $('.ballwrapper');
    if( wrapper.length == 0 ) {
        $('body').append('<div class="ballwrapper"><img class="ball" src="http://michaelreid.typepad.com/.a/6a00e54edabd838833011168a00f09970c-800wi"/></div>');
    }
    MoveCode();
});

＃2你需要在MoveCode函数的开头有一个门，以防止在移除球/球包装器后继续进行“额外”循环（每次额外点击开始的循环）。

function MoveCode() {
    var wrapper = $('.ballwrapper');
    if( wrapper.length == 0 ) return;

    var l = $('.ball').css("left");
    var left = parseInt(l);
    if (left > parseInt(wrapper.css('width'))) {
        //alert('removed');
        wrapper.remove();
        return;
    }

    $('.ball').css("left", (left + 60) + "px");
    setTimeout(MoveCode, 160);
}

还要注意......我改变了它以移除球形包装，而不是仅仅移除球。 否则，如果一遍又一遍地运行它，则会在背景中堆积旧的，未使用的包装纸。