При выполнении таких операций, как изменение размера окна, прокрутка, проверка содержимого поля ввода и т. д., если частота вызовов обработчика событий неограничена, это увеличит нагрузку на браузер, что приведет к очень плохому взаимодействию с пользователем. На этом этапе мы можем использовать debounce (анти-дрожание) и Throttle (дросселирование), чтобы уменьшить частоту вызовов, не влияя на фактический эффект.
Функция защиты от тряски
Функция устранения дребезга: когда событие постоянно запускается, обработчик события будет выполняться только один раз, если событие не запускается снова в течение определенного периода времени.Если событие запускается снова до наступления установленного времени, задержка начинается снова. Как показано на рисунке ниже, когда событие прокрутки запускается постоянно, функция дескриптора не выполняется.Если событие прокрутки не запускается в течение 1000 миллисекунд, событие прокрутки запускается с задержкой.
Давайте реализуем простой дебаунс вместе~
Код защиты от дрожания:
function debounce(fn, wait) {
var timeout = null;
return function() {
if(timeout !== null)
clearTimeout(timeout);
timeout = setTimeout(fn, wait);
}
}
// 处理函数
function handle() {
console.log(Math.random());
}
// 滚动事件
window.addEventListener('scroll', debounce(handle, 1000));Эффект следующий:
Мы можем видеть, что когда событие прокрутки постоянно запускается, дескриптор обработчика события будет вызываться только один раз после остановки прокрутки на 1000 миллисекунд, то есть в процессе непрерывного запуска события прокрутки дескриптор функции обработчика события не был выполнен.
регулирование функции
Дроссельная функция (throttle): когда событие запускается постоянно, гарантируется, что обработчик события вызывается только один раз в течение определенного периода времени. Популярное объяснение дросселирования похоже на то, что когда мы выпускаем воду из крана, как только клапан открывается, вода устремляется вниз.Придерживаясь прекрасных традиционных добродетелей трудолюбия и бережливости, мы должны немного приоткрыть кран. по каплям через временной интервал. Как показано на рисунке ниже, когда событие прокрутки запускается постоянно, функция дескриптора не выполняется немедленно, а функция дескриптора выполняется каждые 1000 миллисекунд.
Существует два основных способа реализации регулирования функций: метки времени и таймеры. Затем используйте два метода для реализации дросселя~
Код дроссельной заслонки (отметка времени):
var throttle = function(func, delay) {
var prev = Date.now();
return function() {
var context = this;
var args = arguments;
var now = Date.now();
if (now - prev >= delay) {
func.apply(context, args);
prev = Date.now();
}
}
}
function handle() {
console.log(Math.random());
}
window.addEventListener('scroll', throttle(handle, 1000));Когда срабатывает высокочастотное событие, оно будет выполнено немедленно в первый раз (интервал между функцией привязки события прокрутки и фактическим событием триггера обычно больше, чем задержка. Если вам нужно прокрутить страницу в пределах 1000 миллисекунд загрузки страницы, я ничего не могу поделать. o(╥﹏╥)o), а затем, как часто событие запускается, оно выполняется только один раз за время задержки. И при срабатывании последнего события событие не будет выполняться повторно (интервал между последним событием срабатывания и предпоследним событием срабатывания меньше задержки, почему он меньше? Потому что он больше не называется высокочастотным (*╹ ▽╹*)).
Эффект следующий:
Код регулирования (таймер):
var throttle = function(func, delay) {
var timer = null;
return function() {
var context = this;
var args = arguments;
if (!timer) {
timer = setTimeout(function() {
func.apply(context, args);
timer = null;
}, delay);
}
}
}
function handle() {
console.log(Math.random());
}
window.addEventListener('scroll', throttle(handle, 1000));Когда событие запускается, мы устанавливаем таймер.Когда событие запускается снова, если таймер существует, он не будет выполнен.По истечении времени задержки таймер выполняет функцию выполнения и очищает таймер, так что следующий таймер можно установить устройство. Когда событие запускается в первый раз, функция выполняется не сразу, а через несколько секунд задержки. И затем, как часто событие запускается, оно выполняется только один раз за каждое время задержки. После срабатывания последней остановки функция может быть выполнена снова из-за задержки таймера.
При регулировании можно использовать временные метки или таймеры. Точнее, отметку времени + таймер можно использовать для немедленного выполнения обработчика события при первом запуске события, а также для выполнения обработчика события один раз после того, как событие было запущено в последний раз.
Код регулирования (метка времени + таймер):
var throttle = function(func, delay) {
var timer = null;
var startTime = Date.now();
return function() {
var curTime = Date.now();
var remaining = delay - (curTime - startTime);
var context = this;
var args = arguments;
clearTimeout(timer);
if (remaining <= 0) {
func.apply(context, args);
startTime = Date.now();
} else {
timer = setTimeout(func, remaining);
}
}
}
function handle() {
console.log(Math.random());
}
window.addEventListener('scroll', throttle(handle, 1000));Используйте время начала startTime, текущее время curTime и задержку внутри функции регулирования для расчета оставшегося времени. событие запускается в первый раз, и обработчик события выполняется каждый раз с задержкой). Если время не достигнуто, оно запускается по истечении оставшегося времени (чтобы гарантировать, что обработчик события может быть выполнен снова после последнего события триггера). Конечно, если событие сработает снова в течение оставшегося периода, текущий таймер будет отменен, а оставшееся время будет пересчитано для оценки текущего состояния.
СуммироватьФункция защиты от тряски:Объединение нескольких операций в одну операцию. Принцип заключается в поддержании таймера, который предусматривает, что функция срабатывает после времени задержки, но если она снова срабатывает в течение времени задержки, предыдущий таймер будет отменен и сброшен. Таким образом, может быть запущено только последнее действие.
Функция дросселирования:Заставляет функцию срабатывать только один раз в определенный период времени. Принцип заключается в том, чтобы запустить функцию, определив, достигнуто ли определенное время.
разница: Регулирование функции гарантирует, что независимо от того, как часто событие запускается, реальный обработчик события будет выполняться один раз в течение указанного времени, в то время как функция защиты от сотрясения запускает функцию только один раз после последнего события. Например, в сценарии с бесконечной загрузкой страницы нам нужно, чтобы пользователь время от времени отправлял Ajax-запрос во время прокрутки страницы, а не запрашивал данные, когда пользователь переставал прокручивать страницу. Такой сценарий подходит для достижения технологии дросселирования.