Question

如果你点击一次html的主体并等到球离开它的罚款。但是如果你点击2次以上，你会注意到球的移动速度更快。当你再次点击身体让球回来时它仍然比它应该更快。为什么？ http://jsfiddle.net/44nwt/10/

-edit-在我的页面上的firefox中（我没有试过jsfiddle）我注意到即使在球离开屏幕并被移除后，也会重复调用move func。为什么不存在？

Answer 1

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

如果左边未定义（即球已被移除），则条件为假，并且计划将重复进行

Answer 2

This works (http://jsfiddle.net/44nwt/11/)

有两个问题：

＃1 每次点击都会创建另一个球和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函数的开头有一个门，以防止一旦球/ ballwrapper具有“额外”周期（每次额外点击开始的周期）被删除了。

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);
}

还要注意......我改变了它以移除球形包装，而不是仅仅移除球。否则，如果你一遍又一遍地运行它，你将在后台累积旧的未使用的ballwrappers。

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

2 个答案: