javascript - 我需要一个计时器来暂时禁用鼠标悬停事件

Question

我正在寻找一种简单的方法来暂时禁用鼠标悬停事件，实际上是 1000 毫秒。到目前为止，我所有的尝试都失败了。当鼠标悬停在 div 边缘时多次进入时，我试图阻止图像闪烁。这是我的代码:

var ranNum, result_10, resultFloor, piccy, audio;

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

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

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