我需要一個計時器來暫時禁用鼠標懸停事件

Question

我正在尋找一種簡單的方法來暫時禁用鼠標懸停事件，字面上1000毫秒。我所有的嘗試都失敗了。我試圖阻止我的圖像閃爍，當鼠標懸停在div的邊緣多次進入。這是我的代碼，非常感謝您的幫助。

var ranNum, result_10, resultFloor, piccy, audio; 
 

 
function myFunction() { 
 
\t ranNum = Math.random(); 
 
\t result_10 = (ranNum * 5) + 1; 
 
\t resultFloor = Math.floor(result_10); 
 
\t piccy = "<img src=\"random_images/" + resultFloor + ".gif\" />"; 
 
\t document.getElementById("demo").innerHTML = piccy; 
 
\t audio = document.getElementById("audio"); 
 
     audio.play(); 
 
}

<div id="container"> 
 
\t <div id="demo" onmouseenter="myFunction()">This</div> 
 
    <audio id="audio" src="pop.wav" ></audio> 
 
</div>

Answer 1

這將停止閃爍：

var ranNum, result_10, resultFloor, piccy, audio; 
 
var isPlaying = false; 
 

 
var audio = document.getElementById("audio"); 
 
function myFunction() { 
 
    if (!isPlaying) { 
 
\t isPlaying = true; 
 
\t ranNum = Math.random(); 
 
\t result_10 = (ranNum * 5) + 1; 
 
\t resultFloor = Math.floor(result_10); 
 
\t piccy = "<img src=\"http://d2.alternativeto.net/dist/icons/cloudapp_2094.png?width=64&height=64&mode=crop&upscale=false\" />"; 
 
\t document.getElementById("demo").innerHTML = piccy; 
 
    // check every 1/2 second to see if the audio has ended 
 
\t var t = setInterval(function() { 
 
    console.log(audio.ended); 
 
\t if (audio.ended) { 
 
\t  isPlaying = false; 
 
\t  clearInterval(t); 
 
\t } 
 
\t }, 500); 
 
\t audio.play(); 
 
    } 
 
}

<div id="container"> 
 
\t <div id="demo" onmouseenter="myFunction()">This</div> 
 
    <audio id="audio" src="http://freewavesamples.com/files/Casio-MT-45-Pops.wav" ></audio> 
 
</div>

Answer 2

這裏有一個快速和骯髒的方法。只需使用引用函數的變量，然後將引用更改爲指向不執行任何操作的函數，然後返回到原始函數。

如果您已經在使用這些庫，或者如果您看到它們不僅僅是在這種情況下幫助您，我同意Kosch建議的使用下劃線/ lodash去抖功能。

var ranNum, result_10, resultFloor, piccy, audio; 
 

 
function myFunction() { 
 
     disableMouseOverHandler(); 
 
    \t ranNum = Math.random(); 
 
\t result_10 = (ranNum * 5) + 1; 
 
\t resultFloor = Math.floor(result_10); 
 
\t piccy = "<img src=\"random_images/" + resultFloor + ".gif\" />"; 
 
\t document.getElementById("demo").innerHTML = piccy; 
 
\t audio = document.getElementById("audio"); 
 
     audio.play(); 
 

 
} 
 

 
function doNothing() { 
 
} 
 

 
var mouseOverHandler = myFunction; 
 

 
function disableMouseOverHandler() { 
 
    mouseOverHandler = doNothing; 
 
    setTimeout(function(){ mouseOverHandler = myFunction; }, 3000); 
 
    //I used 3000ms (3 seconds) to make it more pronounced. 
 
}

<div id="container"> 
 
\t <div id="demo" onmouseenter="mouseOverHandler()">This</div> 
 
    <audio id="audio" src="pop.wav" ></audio> 
 
</div>

Answer 3

var myFunctionDisabled = null; 

function disableMyFunction() { 
    clearTimeout(myFunctionDisabled); 
    myFunctionDisabled = setTimeout(function() { myFunctionDisabled = false; }, 1000); 
} 

function myFunction() { 
    if (myFunctionDisabled) return; 
    ... 
}