Javascript 鼠标悬停运行功能，然后等待并再次运行

Question

我正在尝试让一个函数在鼠标悬停在某个元素上时触发。但是，如果该函数已经运行我希望它不会触发。

我有这个用于鼠标悬停触发器

onmouseover="runFunc()">

我有这个 js:

var timerStarted = false;

function waitToStart() {
  timerStarted = false;
}


function runFunc() {

  if (!timerStarted) {

     console.log('run function');
   } 

   timerStarted = true;
   setTimeout(waitToStart, 6000);
}

当我第一次将鼠标悬停在该元素上时，我得到

run function

在 6 秒内没有任何反应，这似乎是正常的。然而，6 秒后，控制台输出快速计数，达到我将鼠标悬停在该函数上的次数：

(24) run function

我很难理解为什么以及如何确保该函数仅在鼠标悬停后每 6 秒触发一次。

Answer 1

您正在启动许多个计时器。最终它们都结束了，每个都将你的布尔值设置为假，即使在那之前的半秒你仍然开始 又一个 计时器。

您真正想要的是在发出新计时器之前取消任何先前启动的计时器，或者仅在您确定前一个计时器已经超时时才启动新计时器.效果有点不同：第一个解决方案将使用 every 鼠标移动重置倒计时（因此必须保持至少 6 秒），而第二个将确保有if 块的执行间隔至少 6 秒。

第二种方法的工作原理如下：

var timerStarted = false;

function waitToStart() {
  timerStarted = false;
}

function runFunc() {
   if (!timerStarted) {
      console.log('run function');
      timerStarted = true;           // <--- moved inside the IF block
      setTimeout(waitToStart, 6000); //
   } 
}

Javascript 鼠标悬停运行功能，然后等待并再次运行

Javascript mouseover run function, then wait and run again

javascript

timer

mouseover

Javascript 鼠标悬停 运行 功能，然后等待并再次 运行

Javascript mouseover run function, then wait and run again

javascript

timer

mouseover

Javascript 鼠标悬停运行功能，然后等待并再次运行