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

【问题标题】：I need stop a loop with setTimeout inside in JavaScript我需要在 JavaScript 中使用 setTimeout 停止循环
【发布时间】：2014-07-30 12:28:43
【问题描述】：

我有一个带有 setTiemout 的循环，我需要通过 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

谢谢

【问题讨论】：

标签： javascript for-loop settimeout

【解决方案1】：

您必须保留指向 setTimout() 方法结果的指针，以便以后可以对它们调用 clearTimout。

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

【讨论】：

【解决方案2】：

这个怎么样？

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

【讨论】：

【解决方案3】：

干净的解决方案：http://jsfiddle.net/y4nEN/2/

interval = setInterval(function() {

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

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

}, 500);

【讨论】：