javascript - 多个定时事件同时运行

Question

如果单击图像，它将在 3 秒后更改图像。但是，如果我在这三秒钟内多次单击图像，它会启动一个新的计时器。特别是如果我在一秒钟内单击图像 5 次，它不会在三秒钟内改变，但是当这三秒钟结束时，它会在一秒钟内改变 5 次。

有没有办法做一个 if 语句说，如果这个函数正在运行，杀死当前正在运行的函数并启动一个新函数。这样，它将忽略图像的前 4 次点击，只运行第五次点击，或者只运行第一次点击并跳过其他四次点击。

这是代码：

 function auto_change(a,b) { // a is the current image and b calls a function that makes certain image visible, it works but need to fix the multiple clicks problem 
if (document.getElementById(a).style.visibility == 'visible'){
    setTimeout(b,3000);
    return;
}

Answer 1

var waitTimer = null;
function auto_change(a,b){
  if (document.getElementById(a).style.visibility == 'visible'){
    waitTimer && clearTimeout(waitTimer);
    waitTimer = setTimeout(b, 3000);
  }
}

存储超时实例并检查它是否已经存在。如果是，请将其清除并重置。如果没有，只需设置它。这将使最后一次点击成为唯一负责的点击。

其他变体：

1）点击具体到哪个a被点击：

var waitTimer = [];
function auto_change(a,b){
  if (document.getElementById(a).style.visibility == 'visible'){
    waitTimer[a] && clearTimeout(waitTimer[a]);
    waitTimer[a] = setTimeout(b, 3000);
  }
}

2）对第一次点击做出反应：

var waitTimer = null;
function auto_change(a,b){
  if (!waitTimer && document.getElementById(a).style.visibility == 'visible'){
    waitTimer = setTimeout(b, 3000);
  }
}

3）首次点击和特定于a：

var waitTimer = [];
function auto_change(a,b){
  if (!waitTimer[a] && document.getElementById(a).style.visibility == 'visible'){
    waitTimer[a] = setTimeout(b, 3000);
  }
}