Дебонсировка функции

Автор:CodeSnippets
Язык:
JavaScript
42 просмотров
0 избранных
2025年9月19日

Реализация кода

JavaScript
function debounce(fn,delay){
    let timerId;
    return function(...args){
        clearTimeout(timerId);
        timerId=setTimeout(()=>{
            fn.apply(this,args);
        },delay);
    };
}

//usage
const d_layout = debounce(layout,500);
window.onresize = d_layout;

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

Принцип её работы можно понять по аналогии с «закрытием дверей лифта»: После открытия дверей лифт по умолчанию ожидает фиксированное время (например, 2 секунды), прежде чем закрыть их. Если за это время войдёт новый пассажир (что соответствует повторному срабатыванию функции), исходный таймер ожидания отменяется, и обратный отсчёт перезапускается. Только когда после завершения обратного отсчёта новых срабатываний не будет, выполнится действие «закрыть двери» (что соответствует выполнению функции).

#Дебонсировка функции

Описание фрагмента

Применимые сценарии

  • Высокочастотное срабатывание: Функция вызывается повторно за короткий промежуток времени (например, события resize окна, события input полей ввода). Это не ограничивается только событиями DOM — дебонсировка также подходит для высокочастотных вызовов функций в не-DOM средах (например, в Node.js).
  • Ресурсоемкие функции: Вызываемая функция относится к CPU-интенсивным операциям (например, вычисления макета страницы, массовые операции с DOM, которые вызывают перерасчёт макета/перерисовку) или IO-интенсивным операциям (например, сетевые запросы, чтение/запись файлов). Простые операции (например, вычисление 1+1) не требуют дебонсировки.
  • Приоритет последнего результата: Среди результатов нескольких вызовов функции за короткое время нужно сохранить только результат последнего вызова. Например, после регулировки размера окна требуется только макет, соответствующий окончательному размеру — макеты, созданные в процессе регулировки, не имеют смысла.

Рекомендуемые фрагменты

Комментарии

Загрузка...