Устранение дребезга — это метод, который задерживает выполнение функции до тех пор, пока пользователь не перестанет выполнять определенное действие в течение определенного периода времени. Например, если у вас есть панель поиска, которая получает предложения из серверной части по мере того, как пользователь печатает, вы можете отменить функцию, которая выполняет вызов API, чтобы она запускалась только после того, как пользователь перестанет печатать на несколько секунд. Таким образом, вы сможете избежать слишком большого количества вызовов API, которые могут перегрузить ваш сервер или вернуть нерелевантные результаты.

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

Вот пример того, как реализовать устранение дребезжания в JavaScript:

// A function that makes an API call with the search query
function searchHandler(query) {
    // Make an API call with search query
    getSearchResults(query);
}
// A debounce function that takes a function and a delay as parameters
function debounce(func, delay) {
    // A timer variable to track the delay period
    let timer;
    // Return a function that takes arguments
    return function(…args) {
        // Clear the previous timer if any
        clearTimeout(timer);
        // Set a new timer that will execute the function after the delay period
        timer = setTimeout(() => {
            // Apply the function with arguments
            func.apply(this, args);
        }, delay);
    };
}
// A debounced version of the search handler with 500ms delay
const debouncedSearchHandler = debounce(searchHandler, 500);
// Add an event listener to the search bar input
searchBar.addEventListener("input", (event) => {
    // Get the value of the input
    const query = event.target.value;
    // Call the debounced search handler with the query
    debouncedSearchHandler(query);
});

В этом примере у нас есть функция searchHandler, которая выполняет вызов API с поисковым запросом. У нас также есть функция устранения дребезга, которая принимает функцию и задержку в качестве параметров и возвращает версию этой функции с устранением дребезга. Мы используем эту функцию debounce для создания функции debouncedSearchHandler с задержкой 500 мс. Затем мы добавляем прослушиватель событий к входным данным панели поиска и вызываем функцию debouncedSearchHandler с входным значением. Таким образом, мы можем гарантировать, что сделаем только один вызов API после того, как пользователь перестанет вводить текст в течение 500 мс.

Что такое дросселирование?

Регулирование — это метод, который ограничивает выполнение функции один раз в каждый указанный интервал времени. Например, если у вас есть обработчик событий изменения размера, который настраивает макет вашей страницы, вы можете ограничить функцию, обновляющую макет, чтобы она запускалась только один раз каждые 100 мс. Таким образом, вы можете избежать слишком частого запуска кода, что может привести к неуклюжему пользовательскому интерфейсу или высокой загрузке ЦП.

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

Вот пример того, как реализовать регулирование в JavaScript:

// A function that updates the layout of the page
function updateLayout() {
    // Update layout logic
}
// A throttle function that takes a function and an interval as parameters
function throttle(func, interval) {
    // A flag variable to track whether the function is running or not
    let isRunning = false;
    // Return a function that takes arguments
    return function(…args) {
        // If the function is not running
        if (!isRunning) {
            // Set the flag to true
            isRunning = true;
            // Apply the function with arguments
            func.apply(this, args);
            // Set a timer that will reset the flag after the interval
            setTimeout(() => {
                // Set the flag to false
                isRunning = false;
            }, interval);
        }
    };
}
// A throttled version of the update layout function with 100ms interval
const throttledUpdateLayout = throttle(updateLayout, 100);
// Add an event listener to the window resize event
window.addEventListener("resize", () => {
    // Call the throttled update layout function
    throttledUpdateLayout();
});

В этом примере у нас есть функция updateLayout, которая обновляет макет страницы. У нас также есть функция throttle, которая принимает функцию и интервал в качестве параметров и возвращает регулируемую версию этой функции. Мы используем эту функцию throttle для создания функции throttledUpdateLayout с интервалом 100 мс. Затем мы добавляем прослушиватель событий к событию изменения размера окна и вызываем функцию throttledUpdateLayout. Таким образом, мы можем гарантировать, что макет обновляется только раз в 100 мс.

В чем разница между устранением дребезга и регулированием?

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

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

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

Заключение

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