如何在 javascript 中用嵌套的 setTimeout() 函数打破 for 循环？

Question

情况

我有一个在单击按钮时调用的函数，它应该绘制一个动画图表，每 2 秒更新一次图表。当用户再次单击该按钮时，动画仍为运行，动画应停止。

我目前的解决方案

现在我有以下脚本可以在视觉上停止动画，但底层的 for 循环会在后台继续直到结束：

var animRun = false;
$("#animateButton").on("click", function() {
    if (animRun === false) {
        redraw(data.slice(0,30))
        //some CSS...

    } else {
        //Some CSS...
        animRun = false;
    }
});

function redraw(data) {
    animRun = true;

    for (var i=0; i<data.length;i++){

        (function(i){
            setTimeout(function(){
                if(animRun === true) {
                    //draw the chart
                    return draw(data[i])
                }
            },2000*(i))

            if (i === data.length -1) {
                //reset animRun
                if(animRun === true) {
                     //Some CSS things
                     //...
                     animRun = false;
                 }
            }
        })(i);
    }


}

问题

当用户在动画仍在执行时再次单击按钮时停止 for 循环的正确方法是什么？

Answer 1

你试过了吗clearTimeout。将绘制超时存储到数组中，完成后停止

var animRun = false;
var drawArr = [];
$("#animateButton").on("click", function() {
    if (animRun === false) {
        redraw(data.slice(0,30))
        //some CSS...

    } else {
        //Some CSS...
        animRun = false;

        drawArr.forEach(d=>clearTimeout(d));
    }
});

function redraw(data) {
    animRun = true;

    for (var i=0; i<data.length;i++){

        (function(i){
            drawArr[i] = setTimeout(function(){
                if(animRun === true) {
                    //draw the chart
                    return draw(data[i])
                }
            },2000*(i))

            if (i === data.length -1) {
                //reset animRun
                if(animRun === true) {
                     //Some CSS things
                     //...
                     animRun = false;
                 }
            }
        })(i);
    }


}

如何在 javascript 中用嵌套的 setTimeout() 函数打破 for 循环？

How to break a for-loop with a nested setTimeout() function in javascript?

javascript

for-loop

settimeout