В этой статье описывается концепция и использование дросселирования функции JavaScript. Поделитесь этим для вашей ссылки, следующим образом:
Недавно, когда я делал веб -страницы, у меня было требование, которое должно было изменить некоторые размеры элементов страницы, когда окно браузера изменилось, поэтому я естественно подумал о событии изменения размера окна, поэтому я написал это
<! Doctype html> <html> <head> <title> throttle </title> </head> <body> <script type = "text/javascript"> n = 0; function resizehandler () {console.log (new Date (). getTime ()); console.log (++ n); } window.onresize = resizehandler; </script> </body> </html>Функция реализована, но когда я перетаскиваю способ, которым я меняю размер окна браузера, я посмотрел на консоли
Правильно, простое перетаскивание заставило мой метод ResizeHandler () выполнить 52 раза, что не является тем, что я хочу вообще. На самом деле, код моего метода ResizeHandler () очень сложный, и я даже использую Ajax для отправки запросов на сервер. Если я просто меняю размер окна за раз, мне нужно позвонить 52 раза. Это большое дело.
Функция дросселя
На самом деле, мое первоначальное намерение состоит в том, чтобы внести некоторые настройки на страницу после того, как окно изменяется. Событие с изменением размера окна не запускается после окончания размер. Я не знаю конкретной частоты, но она постоянно вызывает, пока размер окна не изменится. Фактически, подобные механизмы и мыслить неоднократно запускаются за короткий промежуток времени.
Существуют функции, которые конкретно решают эту проблему в JavaScript Advanced Programming
функция дроссельная заслонка (метод, контекст) {cleartimeout (method.tid); method.tid = settimeout (function () {mehod.call (context);}, 500);}Принцип очень прост. Используйте таймер, чтобы отложить выполнение функции на 500 миллисекунд. Если функция снова вызывается в течение 500 миллисекунд, последний вызов будет удален. На этот раз звонок будет выполнен через 500 миллисекунд, и это будет повторен. Таким образом, мой код только сейчас может быть изменен на
<script type = "text/javascript"> n = 0; function resizehandler () {console.log (new Date (). getTime ()); console.log (++ n);} функция function throttle (метод, контекст) {cleartimeout (method.tid); method.tid = settimeout (function () {method.call (context);}, 500);} window.onresize = function () {throttle (resizehandler, window);}; </script>Попробуйте перетаскивать и перетаскивать, это было выполнено только один раз
Другой способ сделать это
Он также существует функциональное решение дроссельного дросселя, которое делает это
функция дроссельная заслонка (метод, задержка) {var timer = null; return function () {var context = this, args = аргументы; ClearTimeout (таймер); timer = settimeout (function () {method.apply (context, args);}, задержка); }}Попробуйте назвать это, тот же эффект
<script type = "text/javascript"> n = 0; function resizehandler () {console.log (new Date (). getTime ()); console.log (++ n);} функция function throttle (метод, задержка) {var timer = null; return function () {var context = this, args = аргументы; ClearTimeout (таймер); timer = settimeout (function () {method.apply (context, args);}, задержка); }} window.onresize = дроссельная заслонка (RESIZEHandler, 500); // Поскольку возвращается ручка функции, нет необходимости обернуть функцию </script>Сравнивать
Оба метода используют SetTimeout. Разница в том, что функция, добавленная вторым методом, задерживает время выполнения. Это легко иметь эту функцию в первом решении, добавив параметр.
Но первая опция устанавливает TID как переменную функции для сохранения, а второй вариант создает закрытие для хранения. Я лично думаю, что разрыв не большой, и мне нравится первый, что является простым и эффективным.
Новый спрос
Однажды я сделал что -то подобное, как и автоматическая подсказка для ввода на домашней странице Baidu. Я связал событие Keyup в тексте. Он автоматически подсказывает каждый раз, когда появляется клавиатура, но я не хочу так часто запрашивать. Поэтому я использовал приведенный выше метод, но это было трагично. Я только остановил ввод и ждал, пока 500 миллисекунд запрашивают, и во время ввода вообще не было никаких подсказков. Я посмотрел на код и обнаружил, что это не так. Пока пользователь будет вводить слепо, нажмите клавиатуру в течение 500 миллисекунд, функция приглашения будет постоянно отложена. Это будет вызвать только тогда, когда я остановился, что было бы бессмысленным.
Можно ли его выполнить один раз в фиксированное время, основанное на дросселировании функции?
Небольшие изменения
Я искал онлайн, и мы можем внести некоторые изменения на основе второго метода написания (первый из них немного плохо для расширения нескольких переменных для функций) и добавить параметр по мере необходимости выполнять фиксированный интервал.
Функция дроссельная заслонка (метод, задержка, продолжительность) {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);}, задержка); }}}Таким образом, мы определим, как долго проходит интервал. Если время настройки будет превышено, мы немедленно выполним его. Используйте пример прямо сейчас, чтобы попробовать эффект
window.onresize = дроссель (Resizehandler, 100,200);
Это правда, что частых выполнений или окончательного выполнения нет
For more information about JavaScript related content, please check out the topics of this site: "Summary of JavaScript switching effects and techniques", "Summary of JavaScript search algorithm skills", "Summary of JavaScript animation effects and techniques", "Summary of JavaScript errors and debugging techniques", "Summary of JavaScript data structures and algorithm skills", "Summary of Алгоритмы и методы обхода JavaScript »и« Сводка использования математических операций JavaScript ».
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.