Question

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

我有这个鼠标悬停触发器

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秒触发一次。

Answer 1

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

您真正想要的是在发布新计时器之前取消任何先前启动的计时器，或者仅在确定前一个计时器已超时时才启动新计时器。效果略有不同：第一种解决方案将通过每鼠标移动重置倒计时（因此必须将其保持至少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); //
   } 
}

Javascript mouseover运行功能，然后等待并再次运行

1 个答案: