Устранение ошибок в JavaScript

Устранение ошибок в JavaScript

Отправка запроса только после того, как пользователь перестал печатать

📚 Свяжитесь с нами. Хотите узнать, что нового на книжной полке Pragmatic? "Подпишитесь на нашу рассылку". Вы будете первыми, кто узнает о выступлениях авторов, о книгах в бета-версии, новых печатных книгах и промо-кодах, дающих вам скидки до 40%.

Язык JavaScript был изобретен, чтобы реагировать на действия пользователя на веб-страницах. Хотя в большинстве случаев взаимодействия происходят нечасто, некоторые могут происходить повторно в течение короткого периода времени. Если вы запрограммируете свою программу для выполнения функции, интенсивно использующей процессор, при каждом взаимодействии, вы можете замедлить работу браузера. Вы не можете просто удалить функцию, потому что это важная часть вашей программы, но вы также не можете позволить ей подорвать производительность вашей программы.

Решение - реализовать функцию устранения дребезга. Debouncing - это метод программирования, который позволяет гарантировать, что задачи не запускаются так часто. Возьмем, к примеру, поиск в реальном времени: событие запускается при каждом нажатии клавиши, но если вы сразу же сделаете запрос с каждым событием, вы излишне задержите сервер, потому что пользователь, возможно, еще не закончил вводить текст.

💡 Если вам интересно, для чего полезен асинхронный режим, выберите Современный асинхронный JavaScript (сейчас в бета-версии), в котором подробно описаны всевозможные примеры и шаблоны.

Лучше всего отправлять запрос только после того, как пользователь перестал печатать как минимум на 200 мс.

Пример устранения дребезга

Давайте посмотрим на пример. Начнем с создания элемента ввода HTML, чтобы пользователь мог ввести поисковый запрос:

<label for="searchInput">Search:</label>
<input type="search" id="searchInput">

Ниже приведен наш код JavaScript. Мы определяем функцию debounce, чтобы контролировать количество времени, в течение которого выполняется наша основная функция. Таким образом, функция не будет отправлять запрос на выборку немедленно; вместо этого он задерживает выполнение на 300 миллисекунд:

// debounce function
function debounce(callback, limit) {
  let timeout;
  return () => {
    clearTimeout(timeout);    
    timeout = setTimeout(() => {
      callback();
    }, limit);
  };
}
// main function
async function queryGoogle(e){
  // use your own API key in production
  const api = `https://www.googleapis.com/customsearch/v1?key=AIzaSyDDafor7FhfUGTvGpjVdE7Tomnt1Yg6XGg&cx=017576662512468239146:omuauf_lfve&q=${searchInput.value}`;
  
  const response = await fetch(api);
  
  // parse the body text as JSON
  const data = await response.json();
  
  // process the data
  console.log(data);
}
// pass our main function to the debounce function
// the second parameter defines the delay in milliseconds
const debouncedKeyPress = debounce(queryGoogle, 300);
const searchInput = document.getElementById('searchInput');
// call the debounced function when a key is released
searchInput.addEventListener('keyup', debouncedKeyPress);

Объяснение примера устранения препятствий

Сначала мы определяем переменную тайм-аута в функции противодействия (строка 3). Эта переменная будет доступна возвращенной функции из-за закрытия. Строка 5 отменяет установленный ранее тайм-аут, так что таймер запускается заново. Строка 6 запускает новый тайм-аут и вызывает функцию обратного вызова queryGoogle() через указанное количество миллисекунд. Результатом является функция, которая действует как фильтр для нашей основной функции, нейтрализующий ненужные отскоки.

Вторая функция queryGoogle() - это асинхронная функция, отвечающая за получение данных поиска из Google API. Внутри функции мы делаем запрос на выборку и анализируем ответ как JSON. Теперь результат готов к обработке.

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

Если вам понравилась эта статья, вам также может понравиться книга Фараза Келхини Современный асинхронный JavaScript, которая сейчас находится в стадии бета-тестирования. До 31 октября 2021 г. вы можете использовать промокод fkajs_medium_35, чтобы сэкономить 35% на версии электронной книги. Промокоды недействительны для предыдущих покупок.