Проще говоря, функциональная дросселя делает функцию непрерывно называться в течение очень короткого промежутка времени. Только когда последняя функция была выполнена после того, как интервал времени, указанный, вы можете сделать следующий вызов функции.
Принцип дросселирования функции довольно прост. Я думаю, что все думали об этом, это таймер. Когда я запускаю время, сначала установите, чтобы задержать событие на некоторое время до выполнения. Если событие снова запускается в течение этого временного интервала, то мы очищаем исходный таймер, а затем установите новый таймер, чтобы задержать выполнение на некоторое время, вот и все.
В следующих сценариях следующие сценарии часто выполняют тяжелые поведения, такие как операции DOM и загрузка ресурсов, в результате чего пользовательский интерфейс пауза или даже сбои браузера.
1. Изменить размер и прокручивать события окна объекта
2. MouseMove Event во время перетаскивания
3. События Mousedown и Keydown в стрельбе
4. События Keyup, которые автоматически завершаются текстовым вводом
Фактически, для события изменения размера окна фактическим требованием состоит в том, чтобы прекратить изменение размера N миллисекунды и выполнять последующую обработку; в то время как большинство других событий требуют последующей обработки на определенной частоте. Есть два решения для этих двух потребностей: деберу и газ.
Дроссельная заслонка и дебюра являются двумя решениями для решения проблемы запроса и несоответствия скорости отклика. Разница между двумя заключается в выборе различных стратегий.
Выполнять функции с интервалами, таких как дроссельная заслонка.
Если событие снова запускается в интервале Devince T, таймер будет повторно указан до тех пор, пока время остановки не будет больше или равно t.
1. Простая реализация функции дроссельной заслонки
Функция дроссельной заслонки (Fn, Threshhold, Scope) {Threshhold || (Phresh Hold = 250); var last, таймер; return function () {var context = scope || этот; var теперь = +new Date (), args = аргументы; if (last && now - last + threshhold <0) {// удерживаться за это ястное время (defertimer); timer = settimeout (function () {last = now; fn.apply (context, args);}, threshhold); } else {last = сейчас; fn.apply (контекст, args); }};}Вызов методов
$ ('body'). On ('mouseMove', docttle (function (event) {console.log ('tick');}, 1000));2. Простая реализация функции дебюра
Функция Debounce (fn, Delay) {var timer = null; return function () {var context = this, args = аргументы; ClearTimeout (таймер); timer = settimeout (function () {fn.apply (context, args);}, задержка); };}Вызов методов
$ ('input.username'). keypress (debounce (function (event) {// Do Ajax запрос}, 250));3. Простая реализация упаковки
/** * Дроссель * @param fn, подождите, дебайнут */var throttle = function (fn, wate, debounce) {var timer = null, // timer t_last = null, // в последний раз набор, // context args, // параметр diff; // разница во времени возврат funiciton () {var curr = + new Date (); var context = this, args = аргументы; ClearTimeout (таймер); if (debounce) {// Если это дебайт timer = settimeout (function () {fn.apply (context, args);}, подождать); } else {// Если это дроссель if (! t_last) t_last = curr; if (curr - t_last> = wat) {fn.apply (контекст, подожди); контекст = wat = null; }}}}/** * Debounce * @param fn, wate */var debounce = function (fn, wate) {return throttle (fn, wate, true);}Резюме: эти два метода подходят для некоторых событий, которые будут запускаться неоднократно, например: MouseMove, Keydown, Keyup, Keypress, Scroll и т. Д.
Если вы только связываете нативные события и не контролируете их, браузер будет заикается, а пользовательский опыт будет плохим. Чтобы улучшить производительность JS, рекомендуется использовать функцию дроссельной дроссельной или функциональной дебюта для управления при использовании вышеуказанных и аналогичных событий.
4. Анализ исходного кода, связанный с подчеркиванием v1.7.0
1. _. Профессиональная функция
_.Throttle = function (func, wate, options) {var context, args, result; var тайм -аут = null; // таймер var предыдущий = 0; // время последнего запуска if (! Options) options = {}; var позже = function () {предыдущий = options.leading === false? 0: _.now (); Тайм -аут = null; result = func.apply (контекст, args); if (! Timeout) context = args = null; }; return function () {var now = _.now (); // выполнить ли if (! Предыдущий && options.leading === false) предыдущий = сейчас; // Вот концепция оставшегося: сколько времени осталось для выполнения события var oraining = wat - (теперь - предыдущий); контекст = это; args = аргументы; // remaining <= 0 Considering that the event is retried after the event is stopped or // When the wait is exactly different, the event will be triggered immediately// remains > wait does not take into account the corresponding scenario// Because now-previous is always positive and not 0, then // remaining will always be smaller than wait, and there is no greater than wait// It is estimated that it is safe, and this situation will also be executed immediately if (remaining <= 0 || Тайм -аут = null; } предыдущий = сейчас; result = func.apply (контекст, args); if (! Timeout) context = args = null; // Следует ли отслеживать} else if (! Timeout && options.trailing! == false) {timeout = settimeout (позже, оставшиеся); } return Result; };};Как видно из вышеизложенного, подчеркивание рассматривает больше ситуаций: опции.
Первый раз выполняется, по умолчанию верно, что означает, что первый раз будет выполнен. Первый раз, когда опции выполнения. Трайлс отключен: в последний раз выполняется в последний раз, по умолчанию верно, что означает, что в последний раз будет выполнено. В последний раз проходит {Tailing: false} означает, что последний раз не выполняется. В первый раз так называется, выполняется ли событие в первую очередь. Когда событие только начинается, следует ли сначала запустить событие. Если вы хотите, предыдущий = 0, а оставшееся отрицательное, так называемый последний раз, выполняется ли функция, немедленно вызывается после окончания события. Этот метод запускается в последний раз. Если вы хотите выполнить, установлен таймер, то есть он должен быть выполнен один раз после окончания события. Занимание> ожидание означает, что клиентское время было изменено.
2. _.debounce функция
_.debounce = function (func, подожди, немедленное) {// Неподвижное значение по умолчанию - временный интервал VAR, ARG, контекст, временная метка, результат; var позже = function () {// Когда функция, возвращаемая _.debounce, называется несколько раз в течение интервала времени, указанного в ожидании, значение TimeStamp будет непрерывно обновляется, что приводит к последнему <wait && last> = 0 всегда будет истинным, таким образом, постоянно начинать новый таймер для выполнения задержки Func var last = _now () - timestamp; if (last <ждать && last> = 0) {timeout = settimeout (позже, подожди - последний); } else {timeout = null; if (! Немедленный) {result = func.apply (контекст, args); if (! Timeout) context = args = null; }}}; return function () {context = this; args = аргументы; TimeStamp = _.now (); // Когда метод называется в первый раз и сразу после интервала времени, указанного в ожидании, таймер начинает вызовать функцию func, если (! Timeout) Timeout = settimeout (позже, подождите); if (callnow) {result = func.apply (context, args); context = args = null; } return Result; };};Я думаю, что замечательная вещь о реализации _.debounce - это начать рекурсивное время, а не настраивать выполнение задержки вызова функций Func, вызывая ClearTimeout.
Выше приведено функция функции оптимизации производительности JavaScript, опубликованная и дебайт, которую редактор представил вам. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!