throttling и debounce

Таблица сравнения

Сравнение throttling и debounce в контексте JavaScript:

Критерий	Throttling	Debounce
Основное назначение	Ограничение частоты выполнения функции. Функция будет вызываться не чаще, чем один раз в заданный период времени.	Задержка выполнения функции до момента, когда перестают происходить повторные вызовы в течение определённого времени.
Поведение	Выполняет функцию сразу, затем игнорирует вызовы в течение определённого времени.	Откладывает выполнение функции до тех пор, пока не прекратятся последовательные вызовы в течение определённого интервала.
Применение	Используется, когда нужно обеспечить регулярное выполнение функции через равные промежутки времени (например, при скроллинге или изменении размера окна).	Используется, когда нужно, чтобы функция выполнилась только после окончания серии событий (например, при поиске в реальном времени или вводе данных).
Примеры событий	Скролл, изменение размера окна, непрерывное движение мыши.	Ввод текста, задержка в выполнении запросов при вводе.
Плюсы	Обеспечивает более плавную и предсказуемую реакцию на события.	Помогает сократить ненужные вычисления и запросы, пока пользователь не завершит ввод.
Минусы	Может пропускать некоторые вызовы функции, если они происходят чаще, чем задано.	Может вызвать задержку в реакции, особенно если время задержки слишком велико.

Это общие различия между throttling и debounce. Важно выбирать подходящий метод в зависимости от конкретного сценария использования в вашем проекте.

Поведение throttling и debounce

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

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

Далее мы рассмотрим конкретные примеры использования Throttling и Debounce, чтобы лучше понять, как они работают и когда их следует применять.

Throttling

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

Как это работает: Если вы установите интервал в 100 мс, функция будет вызываться не чаще, чем один раз каждые 100 мс, независимо от того, сколько раз она была вызвана.

Пример: Представим, что у вас есть функция, которая реагирует на скролл пользователя. Если пользователь скроллит страницу очень быстро, ваша функция без throttling могла бы быть вызвана сотни раз в секунду. Но если вы примените throttling с интервалом в 100 мс, функция будет вызываться не чаще одного раза в 100 мс, что сократит количество вызовов.

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

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

Debounce

Описание: Debounce задерживает вызов функции до тех пор, пока не пройдет определенное время после последнего вызова.

Как это работает: Если установлен интервал в 100 мс, функция не будет вызываться, пока не пройдет 100 мс с момента последнего вызова. Если функция вызывается снова в течение этого интервала, таймер сбрасывается.

Пример: Представим функцию поиска, которая отправляет запрос на сервер при каждом вводе символа пользователем. Без debounce, каждый ввод символа вызовет запрос. Но с debounce в 100 мс, запрос отправится только после того, как пользователь перестанет вводить текст на 100 мс.

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

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

Различия в поведении

• Throttling: Гарантирует, что функция будет вызываться регулярно, но не чаще установленного интервала. Подходит для событий, где важно сохранять некоторую частоту выполнения (например, при скроллинге).
• Debounce: Гарантирует, что функция будет вызвана только после определенной паузы в активности. Подходит для событий, где необходимо дождаться окончания определенного действия пользователя (например, ввода текста).

Реальные примеры с описанием на JavaScript

Рассмотрим более глубоко Throttling и Debounce на конкретных примерах JavaScript. Создадим две функции: одну с использованием throttling, другую с debounce.

Throttling

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

Реализация:

/**
 * Функция throttle ограничивает частоту вызова переданной функции.
 * @param {Function} functionToThrottle - Функция, которую нужно ограничить.
 * @param {Number} timeFrame - Максимальное количество миллисекунд, которое должно пройти между вызовами functionToThrottle.
 * @return {Function} - Возвращает новую функцию с ограниченным вызовом.
 */
function throttle(functionToThrottle, timeFrame) {
    let lastFunctionCallTime // Время последнего вызова функции.
    let deferredFunction // Отложенный вызов функции.

    return function() {
        const context = this // Контекст вызова, чтобы сохранить this для переданной функции.
        const args = arguments // Аргументы для передачи в функцию.

        // Текущее время.
        const now = Date.now()

        // Если функция не вызывалась ранее или с момента последнего вызова прошло больше времени, чем timeFrame.
        if (!lastFunctionCallTime || now - lastFunctionCallTime >= timeFrame) {
            // Если есть отложенный вызов, отменяем его.
            if (deferredFunction) {
                clearTimeout(deferredFunction)
                deferredFunction = null
            }

            // Вызываем функцию и обновляем время последнего вызова.
            functionToThrottle.apply(context, args)
            lastFunctionCallTime = now
        } else {
            // Если с момента последнего вызова не прошло достаточно времени,
            // откладываем вызов функции до истечения timeFrame.
            clearTimeout(deferredFunction)
            deferredFunction = setTimeout(function() {
                functionToThrottle.apply(context, args)
                lastFunctionCallTime = Date.now()
            }, timeFrame - (now - lastFunctionCallTime))
        }
    }
}

// Пример функции, которая будет вызываться с ограничением.
const onScroll = () => {
    console.log('Scroll event handler call')
}

// Добавляем слушатель события скролла, используя throttle для уменьшения частоты вызовов.
window.addEventListener('scroll', throttle(onScroll, 1000))

Описание: Здесь функция throttle принимает два параметра: functionToThrottle, которая является функцией, частоту вызова которой мы хотим ограничить, и timeFrame, который определяет максимальный интервал между вызовами functionToThrottle. Эта функция возвращает новую функцию, которая при вызове обеспечивает, что functionToThrottle вызывается не чаще, чем один раз в заданный интервал времени.

Debounce

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

Реализация:

/**
 * Функция debounce предотвращает слишком частый вызов переданной функции. 
 * Она будет вызывать функцию только после того, как пройдет указанный интервал времени с момента последнего вызова.
 * @param {Function} functionToDebounce - Функция, вызов которой нужно отложить.
 * @param {Number} delay - Задержка в миллисекундах, после которой будет вызвана functionToDebounce.
 * @return {Function} - Возвращает новую функцию, вызов которой отложен.
 */
function debounce(functionToDebounce, delay) {
    let debounceTimer // Таймер для отслеживания задержки между вызовами.

    return function() {
        const context = this // Контекст вызова, чтобы сохранить this для переданной функции.
        const argumentsForFunction = arguments // Аргументы для передачи в functionToDebounce.

        // Очищаем предыдущий таймер, если он был установлен.
        clearTimeout(debounceTimer)

        // Устанавливаем новый таймер. Функция будет вызвана после истечения указанной задержки.
        debounceTimer = setTimeout(() => {
            functionToDebounce.apply(context, argumentsForFunction)
        }, delay)
    }
}

// Пример функции, которую мы хотим вызывать с использованием debounce.
const onInputEvent = () => {
    console.log('Input event handler call')
}

// Получаем элемент поля ввода по его ID.
const inputField = document.getElementById('search-input')

// Добавляем слушатель события ввода, используя debounce для отложенного вызова обработчика.
inputField.addEventListener('input', debounce(onInputEvent, 500))

Описание: Здесь функция debounce принимает два параметра: functionToDebounce, которая является функцией, вызов которой нужно отложить, и delay, который задает время задержки в миллисекундах. Функция debounce возвращает новую функцию, которая при вызове обеспечивает, что functionToDebounce будет вызвана только после того, как пройдет заданная задержка после последнего вызова. Это полезно, например, для уменьшения количества запросов, отправляемых при вводе текста в поле поиска.

Обратите внимание: В обоих этих примерах, throttle и debounce не просто ограничивают вызовы, но и управляют временем, когда эти вызовы выполняются, оптимизируя производительность и улучшая пользовательский опыт.

Заключение

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

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