在clearInterval之后再次启动setInterval

Question

这里有一个动画：http://jsfiddle.net/r55w2u23/

当我点击黄色容器时，动画将停止。但当我点击方块重新开始移动时，它不会起作用。我在代码中找不到错误的地方。

$(document).ready(function() {
    var refreshIntervalId = setInterval(update, 1000);
    $('.square').click(function() {
        if (refreshIntervalId != undefined) {
            refreshIntervalId = setInterval(update, 1000);
        }
    });
$('#container').click(function() {
        if (refreshIntervalId != undefined) {
            clearInterval(refreshIntervalId);
        }
    });
});
function update() {
    $('#container').animate({ left:"+=20px"});
}

Answer 1

很少有问题

$(document).ready(function () {
    var refreshIntervalId = setInterval(update, 1000);
    $('.square').click(function (e) {
        //need to stop the propagation else the container click also will get triggered
        e.stopPropagation();
        //if undefined need to start the interval
        if (refreshIntervalId == undefined) {
            refreshIntervalId = setInterval(update, 1000);
        }
    });
    $('#container').click(function (e) {
        //if the timer is not defined there is no need to clear it
        if (refreshIntervalId != undefined) {
            clearInterval(refreshIntervalId);
            //just calling clear interval will not clear the value of the timer reference
            refreshIntervalId = undefined;
        }
    });
});
function update() {
    $('#container').animate({
        left: "+=20px"
    });
}

演示：Fiddle

Answer 2

首先，您需要停止事件传播，或者您的点击方块也在容器上注册，然后它再次停止。

e.stopPropagation();

（正如Arun Johny已经说过的那样）但也要停止使用setIterval，而是进行递归以确保aniamtion已经结束http://jsfiddle.net/r55w2u23/2/