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) click是特定于点击哪个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) 对第一次点击的 react :

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);
  }
}