Question

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

有没有办法做一个if语句说，如果这个函数正在运行kill kill当前运行的函数并启动一个新函数。这样，它将忽略图像的前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);
  }
}

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

其他变体：

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

多个定时事件同时运行

1 个答案: