JavaScript: почему не работает функция?

Question

[Shimpanze]

Здравствуйте!

Никак не могу понять как работает сброс таймера clearTimeout(). Написал простой сниппет, со следующим алгоритмом:.

1. После каждого нажатия клавиш - запускается таймер и начинается отсчет 2 секунд;
2. после каждого последующего нажатия - таймер сбрасывается и начинает отсчет заново;
3. если нажатий не было больше 2 секунд - выводим в консоль сообщение.

Сам сниппет:

function a() {
  // сначала сбрасываем таймер
  clearTimeout(timer);

  // если нажатий небыло больше чем 2 секунды - запускаем выполнение функции
  var timer = setTimeout(function() { 
    console.log('Выполнение...');
    return false; // почему здесь не срабатывает false и сообщение выводится 100 раз?
  }, 2000);
}

document.getElementById('content').addEventListener('keyup', a);

Пример

Буду благодарен за простое разъяснение.

Comments

[Антон Швец]

https://jsfiddle.net/03h08bgu/

Answer 1

[Arman]

А если

var timer;
function a() {
  !timer || clearTimeout(timer);
  timer = setTimeout(function() { 
    console.log('Выполнение...');
  }, 2000);
}

document.getElementById('content').addEventListener('keyup', a);

Comments

[Shimpanze]

А можно заставить работать мой пример? Чтобы я понял

Answer 2

[Stalker_RED]

При каждом событии keyup вы вызываете функцию "a", которая:
1. clearTimeout(timer); // обращается к неопределенной переменной timer
2. var timer = setTimeout ... // устанавливает переменную, которая будет уничтожена сразу по завершении функции. (но сам таймер при этом работает, честно пишет "выполнение" и даже возвращает false вникуда)

https://codepen.io/anon/pen/gvWKGY?editors=1111

Comments

[Shimpanze]

Скажите, вот так будет грамотно? Не будет вешать систему?:

var timer;

function work() {
  clearTimeout(timer);

  console.log('Выполнение...');
}

function startTimer() {
  timer = setTimeout(work, 2000);
}

document.getElementById('content').addEventListener('keyup', startTimer);

[Stalker_RED]

Shimpanze, норм.
Вообще можете посмотреть готовые реализации throttle / debounce. Вы же не первый это придумали.