マウスオーバーイベントを一時的に無効にするタイマーが必要です

Question

mouseoverイベントを一時的に無効にする簡単な方法を探しています（文字通り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

ここでは、迅速かつ汚いアプローチです。単に関数を参照する変数を使用し、何もしない関数を指すように参照を変更し、元の関数に戻します。

すでにアンダースコア/ロダッシュデバウンス機能を使用している場合、またはこの1つ以上のケースであなたを助けてくれることがわかっている場合は、Koschの提案に同意します。

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