gpt4 book ai didi

javascript - 如何在 JavaScript 中使用嵌套的 setTimeout() 函数打破 for 循环?

转载 作者:行者123 更新时间:2023-12-02 23:36:57 24 4
gpt4 key购买 nike

情况

我有一个在单击按钮时调用的函数,该函数应该绘制一个动画图表,每 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);
}


}

关于javascript - 如何在 JavaScript 中使用嵌套的 setTimeout() 函数打破 for 循环?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56248955/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com