Javascript mouseover 运行函数，然后等待并再次运行答案

【问题标题】：Javascript mouseover run function, then wait and run againJavascript mouseover 运行函数，然后等待并再次运行
【发布时间】：2018-11-25 06:26:48
【问题描述】：

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

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

onmouseover="runFunc()">

我为 js 准备了这个：

var timerStarted = false;

function waitToStart() {
  timerStarted = false;
}


function runFunc() {

  if (!timerStarted) {

     console.log('run function');
   } 

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

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

运行函数

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

(24) 运行函数

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

【问题讨论】：

标签： javascript timer mouseover

【解决方案1】：

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

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

这是第二种方法的工作原理：

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); //
   } 
}

【讨论】：

如此简单。谢谢。