Question

我有一个带有setTimeout的循环，我需要通过onClick按钮停止它

var loop = function(){
    for (var i = 0; i < tx.length; i++) {
        setTimeout((function(x) {
            return function() {
                $("#div").append(tx[x] + " <br />");
            };
        })(i), 500 * i);
    }
};

$("#start").on("click", loop);
$("#stop").on("click", stop);

我在JSFiddle中有一个例子 start|stop loop with buttons

谢谢

Answer 1

您必须保留指向setTimout()方法结果的指示，以便稍后在其上调用clearTimout。

如果您需要从循环本身中断，您将要在代码中的其他位置设置标志，然后检查for循环内部的值。如果设置了该标志，则break。

Answer 2

清洁解决方案：http://jsfiddle.net/y4nEN/2/

interval = setInterval(function() {

    $("#div").append(tx[x] + " <br />");
    x++;

    if(x >= tx.length)
        clearInterval(interval);

}, 500);

Answer 3

这个怎么样？

var tx = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "g", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "y", "z"];
var run = true;
var txIndex = 0;
var loop = function(){
    if(run && txIndex < tx.length) {
        $("#div").append(tx[txIndex] + " <br />");
        txIndex++;
        setTimeout(loop, 500 );
    }
};

$("#start").on("click", function() { run=true; loop() } );
$("#stop").on("click", function() { run=false } );

Fiddle demo

我需要在JavaScript中使用setTimeout停止循环

3 个答案: