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