09.02.2023 в 12:55

Введение в debouncing в JavaScript

Добавление метода оптимизации с удалением ошибок в ваши веб-приложения для повышения производительности.

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

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

Ниже приведена реализация концепции debouncing в JavaScript.

debounce.js

function debounce(callback, delay) {
  let timeout;

  return function(...args) {
    if (timeout) {
      clearTimeout(timeout);
    }

    timeout = setTimeout(() => {
        callback(...args);
    }, delay);
  }
}

document.querySelector('#myid').addEventListener('keyup', debounce(() => {
  console.log('paused');
}, 500));

Как вы можете видеть в приведенном выше коде, мы создаем функцию с именем debounce. Затем мы объявляем переменную timeout. Далее возвращаем и внутреннюю функцию и очищаем тайм-аут, если тайм-аут уже существует. Затем мы вызываем функцию обратного вызова внутри функции setTimeout после определенной настраиваемой задержки. И вызываем эту функцию debounce при каждом событии keyup.

#JavaScript

288

Войти на сайт

Введение в debouncing в JavaScript