同时运行多个定时事件

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