Debsis javaScript – как сделать ваши JS ждать

Автор оригинала: FreeCodeCamp Community Member.

Методы DEBOBING не выполняют при вызове. Вместо этого они ждут заранее определенного времени перед выполнением. Если тот же метод снова вызывается, предыдущий отменен, а таймер перезапускается.

Вот короткое видео прогулки, в котором я делаю метод Debouting:

И вот исходный код видеоуронения:

Давайте посмотрим на код более подробно сейчас.

Предположим, у вас есть кнопка, называемая так:

Click me

И в вашем файле JS у вас есть что-то подобное:

document.getElementById('myBtn').addEventListener('click', () => {
  console.log('clicked');
})

Каждый раз, когда вы нажимаете на свою кнопку, вы увидите сообщение в вашей консоли, сказав нажал Отказ

Давайте добавим метод Debouting для нашего Нажмите Слушатель событий здесь:

document.getElementById('myBtn').addEventListener('click', debouce(() => {
  console.log('click');
}, 2000))

Метод Debousing здесь принимает два аргумента, Обратный вызов & Подожди Отказ Обратный вызов это функция, которую вы хотите выполнить, пока Подожди Задержка настраиваемого периода времени после чего вы хотите, чтобы ваш Обратный вызов быть выполненным.

Вот наш Обратный вызов Метод просто console.log ('Нажмите'); и Подожди это 2000 миллисекунд Отказ

Так учитывая этот метод Debouting, который принимает два параметра Обратный вызов & Подожди Давайте определим Дебати :

function debounce(callback, wait) {
  let timerId;
  return (...args) => {
    clearTimeout(timerId);
    timerId = setTimeout(() => {
      callback(...args);
    }, wait);
  };
}

Функция Дебати принимает два параметра: обратный вызов (который является функцией, которую мы хотим выполнить) и Подожди период (после того, как большая задержка мы хотим выполнить наш обратный вызов).

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

let timerId;
return (...args) => {
  clearTimeout(timerId);
  timerId = setTimeout(() => {
    callback(...args);
  }, wait);
};

Что эта функция вызывает нашу Обратный вызов метод после определенного периода времени. И если в течение этого периода времени тот же метод снова вызывается, предыдущая функция отменяется, а таймер сбрасывается и снова начинается.

И это так! Все, что вам нужно знать о том, что депониция.

Вот еще одно бонусное видео на замыканиях, потому что я использовал закрытие Внутри моих Дебати функция.

Дайте мне знать на Twitter Если бы вы смогли найти использование закрытия внутри метода Debouting.

Счастливое кодирование, все.