Некоторые расчеты и обработка в браузере гораздо дороже, чем другие. Например, операции DOM требуют большего времени памяти и процессора, чем взаимодействия, не связанные с DOM. Попытка выполнить слишком много операций, связанных с DOM, может привести к тому, что браузер повесился, а иногда даже разбился. Это легко произойти, особенно при использовании обработчика событий OnResize в IE. Когда браузер изменяется, событие непрерывно запускается. Если вы попытаетесь выполнить операции DOM внутри обработчика событий OnResize, его высокие частоты могут сбить браузер.
Основная идея, лежащая в основе дросселирования функции, заключается в том, что определенный код не может быть выполнен неоднократно без перерыва. В первый раз, когда функция вызывается, создается таймер, и код запускается после указанного интервала времени. Когда функция называется вторым таймером, она очищает предыдущий таймер и устанавливает еще один. Если предыдущий таймер был выполнен, эта операция не имеет значения. Однако, если предыдущий таймер не был выполнен, он фактически заменяется новым таймером. Цель состоит в том, чтобы выполнить только после того, как запрос на выполнение функции был остановлен в течение определенного периода времени.
функция дроссельная заслонка (метод, контекст) {cleartimeout (method.tid); method.tid = settimeout (function () {method.call (context);}, 100); }Пример приложения:
Предполагая, что существует элемент <div/>, который должен сохранять свою высоту всегда равной его ширине, он может быть закодирован следующим образом:
function resizediv () {var div = document.getElementById ("myDiv"); div.style.height = div.offsetwidth + "px"; } window.onresize = function () {throttle (ressizeiv); }Здесь функция изменения размера помещается в отдельную функцию, называемую RESIFIEDIV, а обработчик onResize Event Calls Callse () и передает функцию RESIZIFIEDIV вместо того, чтобы напрямую вызывать RESIZIFIEDIV (). В большинстве случаев пользователи не могут чувствовать изменения, хотя расчеты, сохраненные в браузере, могут быть очень большими.
Ниже приведены дополнения от других пользователей сети
Сегодня мы в основном пишем о дросселировании функции в нашей ежедневной работе. Некоторые друзья могут не знать о функции дросселирования. На самом деле, в работе многие сценарии требуют от нас throttp: //www.sub.com. Наиболее распространенными являются изменения экрана и события Touchmove или Scroll. Я не знаю, прочитал ли я статьи, которые я написал раньше! jQuery определяет направление скольжения стержней прокрутки страниц и Touchmove. Когда вы используете эти примеры, вы обнаружите, что страница продолжает запускать Touchmove или прокрутку, потому что нет необходимости перекрасить страницу, поэтому я не использую функцию JavaScript для дроссельной заслонки здесь. Однако, когда мы используем Window.Onresize, событие Resize будет запущено непрерывно! Это будет связано с проблемой перекрашения страницы. Поэтому при изменении размера окна мы рекомендуем использовать функциональную дроссель!
Введение в дросселирование функций JavaScript
Если вы чувствуете себя ошеломленным большим кусочком текста на мне, это не имеет значения. Я приведу вам краткий пример, чтобы проиллюстрировать функцию дросселирования здесь! Например, когда мы используем
$ (window) .resize (function () {console.log ("window winwoВы найдете:
Он будет выводить здесь много раз. Мы просто сужаем окно, и оно будет продолжать запускать!
Таким образом, когда DIV часто используется, страница будет постоянно перерисовываться. Если вы столкнетесь с то есть с относительно низкой версией, браузер может потерпеть крах! Чтобы избежать этого, мы можем использовать метод функции дросселирования. Основная идея заключается в том, что когда функция вызывает в первый раз, мы создаем таймер, запускаем код после указанного интервала времени, и когда второй раз будет вызван, мы четко поймем предыдущий таймер и сбросьте его. Если предыдущий таймер был выполнен, то эта операция не является преднамеренной. Если таймер не был выполнен, он будет заменен новым таймером. Цель состоит в том, чтобы выполнить функцию после того, как она была остановлена в течение определенного периода времени.
Метод объекта может быть написан следующим образом:
var haoroomstest = {TimeOoutId: null, выполнять процедуру: function () {console.log ("resize"); }, Process: function () {cleartimeOut (this.TimeOutid); var that = это; this.TimeOutId = setTimeOut (function () {that.performProcessing ();}, 500)}}После этого мы используем:
$ (window) .resize (function () {haoomstest.process ();})
Это уменьшит запросы, уменьшит реврацию DOM и достигнет цели дросселя!
Другие способы дросселирования функции
В дополнение к тому, как мы используем объекты, другие методы и методы функциональной дросселирования также представлены в Интернете и в информации. Я кратко представлю несколько ниже!
Функциональный метод один
функция дроссельная заслонка (метод, контекст) {cleartimeout (method.tid); method.tid = settimeout (function () {method.call (context);}, 100); }Мы используем
Функция resizeiv () {console.log ("harooms")} $ (window) .resize (function () {throttle (resizizivev)})Тот же эффект, что и вышеуказанный объект!
Метод функции второй
Есть также более популярный способ запретить деньги в Интернете, поэтому я напишу об этом здесь!
функция дроссельная заслонка (метод, задержка) {var timer = null; return function () {var context = this, args = аргументы; ClearTimeout (таймер); timer = settimeout (function () {method.apply (context, args);}, задержка); }}Тогда вы можете написать это:
function resizediv () {console.log ("aaorooms")} window.onresize = throttle (RESIZIFIEDIV, 500);Новый спрос
Когда мы делаем нечеткие поиски интеллектуальных подсказок ассоциации, мы свяжемся с событием Keyup на входе. Но я не хочу запускать это так часто, поэтому будут проблемы с использованием вышеуказанного метода. Следовательно, вышеуказанная функция слегка изменена, следующим образом:
Функция дроссельная заслонка (метод, задержка, продолжительность) {var timer = null, begin = new Date (); return function () {var context = this, args = arguments, current = new Date () ;; ClearTimeout (таймер); if (current-begin> = duration) {method.apply (context, args); начало = ток; } else {timer = settimeout (function () {mehod.apply (context, args);}, задержка); }}}Таким образом, запуск не будет таким частым, как раньше!