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

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

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

Предположим, что в вашем веб-приложении есть панель поиска, которая фильтрует результаты поиска по типу пользователя. Фильтруя результаты поиска «на лету», вы экономите время пользователя, устраняете повторяющиеся нажатия кнопок и улучшаете общее взаимодействие с пользователем. Но за это приходится платить. Стоимость, которую придется нести вашему серверу приложений.

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

<input type="text" onkeyup="getSearchResultsFromAPI()">

Предполагается, что прослушиватель событий сделает вызов API.

function getSearchResultsFromAPI(){
  console.log('Making an API call..')
 }

Я рекомендую вам попробовать это и подумать о проблемах, которые это может вызвать. Для базового запроса, такого как «Apple iPhone», будет выполнено 14 вызовов API. Если ваш продукт когда-нибудь будет масштабироваться (я искренне надеюсь), у вас будут тысячи пользователей, отправляющих сотни веб-запросов каждую минуту. Это, безусловно, приведет к перегрузке вашего сервера приложений.

Чтобы уменьшить количество этих веб-запросов, мы можем использовать Debouncing. Debouncing использует довольно простой подход. Вместо того, чтобы отправлять HTTP-вызов при каждом нажатии клавиши, он ждет некоторое время (скажем, 0,2 секунды), а затем отправляет HTTP-запрос, только если за эти 0,2 секунды не было другого нажатия клавиши. Прочтите последнюю строчку снова, медленно.

Если время между двумя нажатиями клавиш меньше 0,2 секунды, таймер сбрасывается. Если вы набираете быстро, есть большая вероятность, что вы сделаете только 1 или 2 запроса для полного поискового запроса.

Я сделал базовое приложение React, которое демонстрирует это. Ссылку можно найти здесь, а код на Github - здесь.

Ванильная реализация Deboucing на JavaScript

const debounce = (funcToExecute, executeAfter) => {        
       let timer;        
       return function(){
            clearTimeout(timer);            
            const context = this;            
            const args = arguments;            
            timer = setTimeout(()=>{
                    funcToExecute.apply(context, args)}
                    , executeAfter);                       
       }      
}

Мы начинаем с создания функции стрелки высокого порядка, которая принимает два аргумента: функцию для выполнения и число (executeAfter), обозначающее время в миллисекундах. Это время, в течение которого мы хотим подождать между двумя последовательными нажатиями клавиш. Объявляем таймер.

Затем мы создаем внутреннюю функцию. Это возвращаемая функция. Функция очищает существующий таймер. В первый раз таймер будет неопределенным, и эта строка не будет иметь никакого эффекта. Затем мы фиксируем и аргументируем. Наконец, мы инициализируем таймер с помощью функции setTimeout и вызываем apply для функции, которую мы передали в качестве параметра. Мы хотим, чтобы setTimeout запускал обратный вызов после количества миллисекунд, которое мы передали в качестве второго параметра.

Вышеупомянутую функцию JavaScript можно вызвать как

debounce(() => this.makeAPICall(), 300);

Это все, что нужно было сделать. Панель поиска в вашем веб-приложении теперь должна отправлять гораздо меньше вызовов, и я бы посоветовал вам проверить это, используя вкладку сети в инструментах разработчика. Надеюсь, вам понравился пост

Примечание от In Plain English

Вы знали, что у нас четыре публикации и канал на YouTube? Вы можете найти все это на нашей домашней странице plainenglish.io - проявите немного любви, подписавшись на наши публикации и подписавшись на наш канал YouTube!