Javascript foreach循环内的Break setTimeout函数

我试图破坏页面加载时启动的setTimeout函数。所以我在这里做的是，如果我点击按钮，那么我将标志值设为true，setTimeout应该会中断，这在这里没有发生。 此setTimeout函数位于for each循环中。下面是我的代码

                rData[0].dt.forEach(function(d, i) {
                    setTimeout(function() {
                        if(flag === "false"){
                            console.log(flag);
                            reserRadius(i); //here I am changing radius of circle
                        }else{
                            console.log(flag);
                            clearTimeout();
                            return;
                        }   

                    }, i * 2000);
                }); 

---

与其一次性创建所有超时，不如只在需要时创建它们。这样，当您决定停止时，您不必清除其中任何一个：

(function repeat(list, i) {
    if (i >= list.length) return; // nothing (more) to do 
    var d = list[i]; // do you need d at all??
    setTimeout(function() {
        if(flag === "false"){
            console.log(flag);
            reserRadius(i); //here I am changing radius of circle
            repeat(list, i+1); // schedule next timeout only now.
        }else{
            console.log(flag);
            // Don't schedule next timeout. This breaks the "loop".
        }   
    }, 2000); // trigger 2 seconds from now. Note: no multiplying anymore.
})(rData[0].dt, 0); // pass initial values: the array and index.

---

在您的代码版本中，您必须保留所有

setTimeout

调用返回的id值，然后将它们（或至少剩余的）逐一传递给

cleartimout

。这将使您的代码相当麻烦。我认为上述方法更有效。

与其一次性创建所有超时，不如只在需要时创建超时。这样，当您决定停止时，您不必清除其中任何一个：

(function repeat(list, i) {
    if (i >= list.length) return; // nothing (more) to do 
    var d = list[i]; // do you need d at all??
    setTimeout(function() {
        if(flag === "false"){
            console.log(flag);
            reserRadius(i); //here I am changing radius of circle
            repeat(list, i+1); // schedule next timeout only now.
        }else{
            console.log(flag);
            // Don't schedule next timeout. This breaks the "loop".
        }   
    }, 2000); // trigger 2 seconds from now. Note: no multiplying anymore.
})(rData[0].dt, 0); // pass initial values: the array and index.

在您的代码版本中，您必须保留所有

setTimeout

调用返回的id值，然后将它们（或至少剩余的）逐一传递给

cleartimout

。这将使您的代码相当麻烦。我认为上述方法更有效

setTimeout无法从其回调本身停止。设置超时 返回可以传递给clearTimeout的timeoutId，clearTimeout将 停止计时

停止所有此类计时器的一种方法是创建一个TimeOutID数组并进行如下更改

var timerIds = [];
rData[0].dt.forEach(function(d, i) {
    timerIds.push(setTimeout(function(){
        if(flag === "false"){
            console.log(flag);
            reserRadius(i); //here I am changing radius of circle
        }
        else{
            console.log(flag);
        }
    }, i * 2000));
}); 

function stopTimeouts(){
    timerIds.forEach(function(id){
        clearTimeout(id);
    }
}
function codeThatMightChangeFlag(callback) {
    // do a bunch of stuff
    if (condition happens to change flag value) {
        // call the callback to notify other code
        stopTimeouts();
    }
}

参考：及

setTimeout无法从其回调本身停止。设置超时 返回可以传递给clearTimeout的timeoutId，clearTimeout将 停止计时

停止所有此类计时器的一种方法是创建一个TimeOutID数组并进行如下更改

var timerIds = [];
rData[0].dt.forEach(function(d, i) {
    timerIds.push(setTimeout(function(){
        if(flag === "false"){
            console.log(flag);
            reserRadius(i); //here I am changing radius of circle
        }
        else{
            console.log(flag);
        }
    }, i * 2000));
}); 

function stopTimeouts(){
    timerIds.forEach(function(id){
        clearTimeout(id);
    }
}
function codeThatMightChangeFlag(callback) {
    // do a bunch of stuff
    if (condition happens to change flag value) {
        // call the callback to notify other code
        stopTimeouts();
    }
}

---

请参阅：并且

clearTimeout

需要从

setTimeout

返回一个id，但是在您有id的地方它没有意义，因为在计算函数时超时已经完成，并且没有理由调用

clearTimeout

不清楚您到底想要代码做什么。您无法删除其内部的

timeout

，因为在执行时，它已被删除。在你的问题中发布一个片段会很有用。我有动画代码，它在这个setTimeout函数中运行。如果我将鼠标悬停在某个特定区域上，我希望该动画停止，因此我正试图借助按钮停止该动画。@castis我已尝试分配给变量，但仍然无法中断循环。

clearTimeout

需要从

setTimeout

返回一个id，但在您拥有该id的地方没有意义，因为在计算函数时，超时已经完成，没有理由调用

clearTimeout

，因此不清楚您到底希望代码做什么。您无法删除其内部的

timeout

，因为在执行时，它已被删除。在你的问题中发布一个片段会很有用。我有动画代码，它在这个setTimeout函数中运行。如果我将鼠标悬停在某个特定区域上，我希望该动画停止，因此我正试图在按钮的帮助下停止该动画。@castis我已尝试分配给变量，但仍然无法中断循环。