Javascript при наведении мыши на функцию запуска, затем подождите и запустите снова - PullRequest
Новая
       6

Javascript при наведении мыши на функцию запуска, затем подождите и запустите снова

0 голосов
/ 25 ноября 2018

Я пытаюсь заставить функцию срабатывать при наведении курсора на элемент.Однако, если функция уже запущена, я хочу, чтобы она не запускалась.

У меня есть это для триггера при наведении курсора 

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 секунд после наведения мыши.

1 Ответ

0 голосов
/ 25 ноября 2018

Вы запускаете много таймеров.И в конце концов все они заканчиваются, и каждый из них устанавливает ваше логическое значение на 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); //
   } 
}
...