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

I need a timer to temporarily disable mouseover event

本文关键字：鼠标 事件 悬停 计时器 一个      更新时间：2023-09-26

我正在寻找一种简单的方法来暂时禁用鼠标悬停事件，大约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>

这将停止闪烁:

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>

var myFunctionDisabled = null;
function disableMyFunction() {
  clearTimeout(myFunctionDisabled);
  myFunctionDisabled = setTimeout(function() { myFunctionDisabled = false; }, 1000);
}
function myFunction() {
  if (myFunctionDisabled) return;
  ...
}

这里有一个快速而肮脏的方法。简单地使用一个引用函数的变量，并将引用更改为指向一个不做任何事情的函数，然后返回到原始函数

我同意Kosch的建议，使用下划线/lodash debounce函数，如果你已经在使用这些库，或者如果你看到它们在不止一种情况下对你有帮助。

var ranNum, result_10, resultFloor, piccy, audio;
function myFunction() {
        disableMouseOverHandler();
 	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();
}
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">
	<div id="demo" onmouseenter="mouseOverHandler()">This</div>
    <audio id="audio" src="pop.wav" ></audio>
</div>

相关文章：