дроссельная заслонка
Дроссельная заслонка, о которой мы говорим здесь, означает функцию дросселирования. Проще говоря, частотный контроллер функциональных вызовов заключается в постоянном выполнении управления интервалом времени. Основные сценарии приложения, такие как:
1. Событие перемещения мыши
2. Динамическое позиционирование элементов DOM, изменения размера и прокрутки событий оконных объектов
Некоторые люди ярко сравнивают инцидент, упомянутый выше, с пробиркой пулемета. Дроссель - это триггер пулемета. Если вы не нанесете спусковой крючок, он будет продолжать стрелять. То же самое относится и к вышеуказанным событиям, которые мы использовали во время разработки. Если вы не выпустите мышь, ее события всегда будут запускаться. Например:
Кода -копия выглядит следующим образом:
var resizetimer = null;
$ (window) .on ('resize', function () {
if (resizetimer) {
cleartimeout (relesizetimer)
}
resizetimer = settimeout (function () {
console.log ("window cressize");
}, 400);
Дебайт
Дебюн очень похож на дроссель. Debounce - это метод, который будет выполняться, когда свободное время должно быть больше или равно определенному значению. Debounce - это контроль интервала свободного времени. Например, когда мы выполняем автозаполнение, нам нужно контролировать интервал времени вызова метода при вводе текста. Как правило, первый входной символ начинает немедленно звонить, и выполненный метод неоднократно вызывается в соответствии с определенным интервалом времени. Это особенно полезно для ненормальных входов, таких как удержание определенного и не поставить его.
Основные сценарии приложения Debounce:
Текст ввода ввода события Keydown, событие Keyup, например, автозаполнение
Существует много методов для этого типа онлайн, таких как Underscore.js, инкапсулирует дроссель и дебайт. jQuery также имеет плагин для дроссельной заслонки и дебюра: дроссельная заслонка/Debounce JQuery. Все принципы одинаковы, и одни и те же функции реализованы. Вот еще одна функция управления дроссельной заслонкой и дебайт, которую я использовал снова:
Кода -копия выглядит следующим образом:
/*
* Когда функция возврата управления частотой называется непрерывно, частота выполнения FN ограничивается, сколько раз она выполняется каждый раз
* @param fn {function} функции, которые необходимо вызвать
* @param задержка {номер} Время задержки в миллисекундах
* @param Непосредственно {bool} Пересечь false к непосредственному параметру. Сначала выполняется связанная функция, а не задерживается, а затем выполняется.
* @return {function} на самом деле вызывает функцию
*/
var throttle = function (fn, задержка, немедленная, дебайна) {
var curr = +new Date (), // текущее событие
last_call = 0,
last_exec = 0,
таймер = null,
Diff, // разница во времени
контекст, // контекст
args,
exec = function () {
last_exec = curr;
fn.apply (контекст, args);
};
return function () {
curr = +new Date ();
контекст = это,
args = аргументы,
diff = curr - (debounce? last_call: last_exec) - задержка;
ClearTimeout (таймер);
if (debounce) {
if (немедленное) {
timer = settimeout (exec, задержка);
} else if (diff> = 0) {
exec ();
}
} еще {
if (diff> = 0) {
exec ();
} else if (немедленно) {
timer = settimeout (exec, -diff);
}
}
last_call = curr;
}
};
/*
* Когда функция возврата управления холостого хода называется непрерывно, время холостого хода должно быть больше или равно задержке до выполнения FN.
* @param fn {function} функция, которую нужно вызвать
* @param задержка {номер} свободное время
* @param Непосредственно {bool} Пересечь false к непосредственному параметру. Сначала выполняется связанная функция, а не задерживается, а затем выполняется.
* @return {function} на самом деле вызывает функцию
*/
var debounce = function (fn, задержка, немедленная) {
вернуть дроссельную заслонку (FN, задержка, немедленная, истинная);