同時運行多個定時事件

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