Добавление перезарядки в прослушиватель событий с помощью JavaScript - PullRequest
Новая
       9

Добавление перезарядки в прослушиватель событий с помощью JavaScript

0 голосов
/ 26 декабря 2018

В функции JavaScript у меня есть этот код: 

clicker1.addEventListener("click", nextImage, true);

Проблема в том, что при быстром нажатии кнопки с этим событием это вызывает ошибки.

Мне нужно сделать так, чтобы при нажатии кнопки произошла задержка, когда событие щелчка не запускает функцию.

Ответы [ 2 ]

0 голосов
/ 26 декабря 2018

Как насчет отключения кнопки на короткое время при использовании setTimeout.В этом примере кнопка отключена на 2000 мс. 

function myFunction() {
  console.log('clicked !!');
  document.getElementById("myButton").disabled = true;
  setTimeout(function(){
    document.getElementById("myButton").disabled = false;
  },2000);
}
<button onClick="myFunction()" id="myButton">Press me</button>
0 голосов
/ 26 декабря 2018

Шаблон, который вы ищете, называется throttling .

Вот пример реализации функции газа: 

const throttle = (func, limit) => {
  let lastFunc
  let lastRan
  return function() {
    const context = this
    const args = arguments
    if (!lastRan) {
      func.apply(context, args)
      lastRan = Date.now()
    } else {
      clearTimeout(lastFunc)
      lastFunc = setTimeout(function() {
        if ((Date.now() - lastRan) >= limit) {
          func.apply(context, args)
          lastRan = Date.now()
        }
      }, limit - (Date.now() - lastRan))
    }
  }
}

Функция получает функциюрегулируется как аргумент вместе с аргументом limit, который представляет собой интервал в миллисекундах до следующего вызова функции.

Возвращает другую функцию, которая выполняет предоставленную функцию в указанный интервал.

Вы используете это так: 

clicker1.addEventListener("click", throttle(nextImage, 1000), true);

Так что теперь, если кто-то "щелкает спамом"Если вы нажмете кнопку, функция nextImage будет выполняться только каждую секунду.

Примечание : если вы используете Lodash, вы можете использовать собственную реализацию throttle _. throttle .

...