如何在javascript中使用嵌套的setTimeout（）函数中断for循环？

形势

我有一个功能，它在点击按钮时被调用，它应该绘制一个动画图表，每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循环的正确方法是什么？

是否尝试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);
    }


}

---

所以这是不可能的？什么是解决方法？几乎：我使用的动画是用d3.js库制作的。。。在我的例子中，我实际上停止了动画，因为变量animRun在第二次单击时被设置为false，因此draw函数没有被认真地执行，经过一些重要的重写，您应该为此目的使用。谢谢！这很有魅力！我只是不明白为什么它应该是一个列表。因为列表是在每次迭代后填写的，不是吗？因此，如果用户在第一次运行draw后停止动画，则drawArr中只有一个元素。它是如何清除所有后续迭代的？只需在再次单击“开始”时重新输入该数组drawArr=[]