javascript - 为什么这个 setTimeout 代码会构建而不终止？

Question

如果您单击 html 正文一次并等到球离开屏幕就可以了。但是，如果您点击 2 次以上，您会发现球移动得更快。当您再次单击 body 以使球返回时，它仍然比应有的速度更快。为什么？ http://jsfiddle.net/44nwt/10/

-编辑- 在我的页面上的 Firefox 中(我没有在 jsfiddle 上尝试过)我注意到即使在球离开屏幕并被移除后，移动函数也会被重复调用。为什么它不存在？

Answer 1

This works (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);
}

另请注意...我将其更改为移除球包装，而不是仅移除球。否则，如果您一遍又一遍地运行它，您将在后台积累旧的、未使用的球包装。