settimeout ()
Метод settimeout () используется для указания, что функция или строка выполняются после указанного числа миллисекундов. Он возвращает целое число, представляющее номер таймера, которое можно передать в leartimeout (), чтобы отменить выполнение этой функции
В следующем коде консоль выводит 0 сначала, примерно через 1000 мс, то есть 1s, возвращается значение метода SetTimeout () Timer SetTimeout ().
var Timer = setTimeout (function () {console.log (timer);}, 1000); console.log (0);Это также может быть записано в виде струнных параметров. Поскольку эта форма приведет к тому, что двигатель JavaScript дважды разбирается, снижая производительность, его не рекомендуется использовать его.
var timer = settimeout ('console.log (timer);', 1000); console.log (0);Если второй параметр SetTimeout опущен, параметр по умолчанию по умолчанию 0
В следующем коде 0 и 1 появляются на консоли, но 0 впереди, и этот вопрос будет объяснен позже.
var -timer = setTimeout (function () {console.log (timer);}); console.log (0);Фактически, в дополнение к первым двум параметрам, метод SetTimeout () также позволяет добавлять больше параметров, которые будут переданы в функцию в таймере.
В следующем коде консоль выведет 2 после примерно 1000 мс, то есть 1 с. Тем не менее, IE9-Browser позволяет только SetTimeout иметь два параметра и не поддерживает больше параметров. NAN будет выходить на консоли.
setTimeout (function (a, b) {console.log (a+b);}, 1000,1,1);Вы можете использовать перенос параметров IIFE для совместимости с переносом параметров функции IE9-браузера.
setTimeout ((function (a, b) {return function () {console.log (a+b);}}) (1,1), 1000);Или напишите функцию вне таймера, а затем функция вызывается с параметрами в анонимной функции в таймере.
Функциональный тест (a, b) {console.log (a+b);} settimeout (function () {test (1,1);}, 1000);Это указывает на
Четыре правила связывания, указанные этим механизмом, были подробно введены в этой серии. Поскольку это в таймере неявно потеряно и очень склонно к ошибкам, это будет объяснено снова здесь.
var a = 0; function foo () {console.log (this.a);}; var obj = {a: 2, foo: foo} settimeout (obj.foo, 100); // 0 // эквивалент var a = 0; settimeout (function foo () {console.log (this.a);Если вы хотите получить значение свойства в объекте OBJ, вы можете поместить функцию obj.foo в анонимную функцию в таймере для неявного привязки.
var a = 0; function foo () {console.log (this.a);}; var obj = {a: 2, foo: foo} settimeout (function () {obj.foo ();}, 100); // 2Или вы можете использовать метод связы
var a = 0; function foo () {console.log (this.a);}; var obj = {a: 2, foo: foo} settimeout (obj.foo.bind (obj), 100); // 2ClearTimeout ()
Функция SetTimeout возвращает целочисленное значение, представляющее номер счетчика, передайте целое число в функцию ClearTimeout, отменив соответствующий таймер
// После 100 мс консоль выводит возвращаемое значение метода SetTimeout () 1VAR Timer = setTimeout (function () {console.log (timer);}, 100);Следовательно, это значение можно использовать для отмены соответствующего таймера
var Timer = setTimeout (function () {console.log (timer);}, 100); ClearTimeout (таймер);Или используйте возвратное значение напрямую в качестве параметра
var Timer = setTimeout (function () {console.log (timer);}, 100); ClearTimeout (1);Вообще говоря, целочисленное значение, возвращаемое SetTimeout, непрерывное, то есть целочисленное значение, возвращаемое вторым методом SetTimeout, на 1 больше, чем первое целочисленное значение.
// Консоль вывод 1, 2, 3VAR Timer1 = setTimeout (function () {console.log (timer1);}, 100); var timer2 = settimeout (function () {console.log (timer2);}, 100); var timer3 = settimeout (function () {console.log (timer3);setInterval ()
Использование SetInterval точно так же, как SetTimeout. Единственное отличие состоит в том, что SetInterval указывает, что задача выполняется время от времени, то есть неограниченное время выполнения
<button id = "btn"> 0 </button> <script> var timer = setInterval (function () {btn.innerhtml = number (btn.innerhtml) + 1;}, 1000); btn.onclick = function () {clearInterval (timer); btn.innerhtml = 0;[Примечание] Стандарт HTML5 предусматривает, что самый короткий промежуток времени Settimeout составляет 4 миллисекунд; Самый короткий интервал SetInterval составляет 10 миллисекунд, то есть интервал времени менее 10 миллисекунд будет скорректирован до 10 миллисекунд
Частота обновления большинства компьютерных мониторов составляет 60 Гц, что примерно эквивалентно перекраске 60 раз в секунду. Следовательно, оптимальный интервал цикла для самого плавного эффекта анимации составляет 1000 мс/60, что приблизительно равна 16,6 мс.
Чтобы сохранить питание, браузер расширяет интервал времени до 1000 миллисекунд для страниц, которых нет в текущем окне. Кроме того, если ноутбук находится в питании батареи, хром и IE 9 или выше переключат интервал времени на таймер системы, который составляет около 16,6 миллисекунд
Механизм работы
Давайте объясним предыдущую часть вопроса, почему 0 появляется перед 1 в результате консоли приведенного ниже?
setTimeout (function () {console.log (1);}); console.log (0);Фактически, установка второго параметра SetTimeout на 0s не означает немедленно выполнение функции, а просто помещение функции в очередь кода.
В следующем примере обработчик событий устанавливается на кнопку BTN. Обработчик событий устанавливает таймер для вызова через 250 мс. После нажатия этой кнопки сначала добавьте обработчик событий OnClick в очередь. Таймер устанавливается после выполнения программы. Через 250 мс указанный код добавляется в очередь и ожидает выполнения.
btn.onclick = function () {settimeout (function () {console.log (1);}, 250);}Если обработчик событий OnClick в приведенном выше коде был выполнен в течение 300 мс, код таймера должен быть выполнен не менее 300 мс после установки таймера. Весь код в очереди должен ждать, пока процесс JavaScript не станет бездействующим, независимо от того, как они добавляются в очередь.
Как показано на рисунке, хотя код таймера был добавлен на 255 мс, он не может быть выполнен в настоящее время, потому что обработчик событий OnClick все еще работает. Самый ранний код таймера может быть выполнен на 300 мс, то есть после завершения обработчика событий OnClick
SetInterval Проблема
Проблема с использованием setInterval () заключается в том, что код таймера, возможно, не был выполнен до того, как код снова будет добавлен в очередь, что приводит к тому, что код таймера работает несколько раз подряд без каких -либо пауз между ними. Решение этой проблемы с помощью двигателя JavaScript состоит в том, чтобы добавить код таймера в очередь при использовании setInterval (). Это гарантирует, что минимальный интервал времени для добавления кода таймера в очередь является указанным интервалом
Тем не менее, это может привести к двум проблемам: 1. Некоторые интервалы пропущены; 2. Интервал между выполнением кода нескольких таймеров может быть меньше, чем ожидалось
Предположим, что определенный обработчик событий OnClick устанавливает интервальный таймер 200 мс с использованием serinterval (). Если обработчик событий занимает более 300 мс для завершения, а код таймера также занимает примерно одно и то же время, определенный интервал будет пропущен одновременно.
Первый таймер в примере добавляется в очередь на 205 мс, но не может быть выполнен до 300 мс. Когда этот код таймера выполнен, в очередь добавляется другая копия в 405 мс. В следующем интервале, 605 мс, код первого таймера все еще работает, и в очереди уже есть экземпляр кода таймера. В результате код таймера на данный момент не будет добавлен в очередь
Итерация SetTimeout
Чтобы избежать проблемы SetInterval () Timer, вы можете использовать призыв SetTimeout ().
setTimeout (function fn () {setTimeout (fn, интервал);}, интервал);Эта цепочка шаблонов вызовов settimeout (), и новый таймер создается каждый раз, когда выполняется функция. Второй SetTimeout () вызывает функцию выполняемой в настоящее время и устанавливает для нее еще один таймер. Преимущество этого заключается в том, что новый код таймера не вставлен в очередь до тех пор, пока не будет выполнен предыдущий код таймера, что гарантирует, что пропущенных интервалов отсутствуют. Более того, это гарантирует, что до выполнения следующего кода таймера, по крайней мере, указанный интервал должен ждать, избегая непрерывной работы.
Используйте setInterval ()
<div id = "mydiv" style = "height: 100px; ширина: 100px; фоновый цвет: розовый; позиция: абсолютно; слева: 0;"> </div> <script> mydiv.onclick = function () {var-timer = setInterval (function () {if (parseint (mydivstyle.left)> 200) {leanterval (timer); false;} mydiv.style.left = parseint (mydiv.style.left) + 5 + 'px'; } </script>Используйте цепные settimeout ()
<div id = "mydiv" style = "Высота: 100px; ширина: 100px; фоновый цвет: розовый; позиция: абсолют; слева: 0;"> </div> <script> mydiv.onclick = function () {settimeout (function fn () {if parseint (mydiv.style.left) <= 200) {setTimeout (fn 16); false;} mydiv.style.left = parseint (mydiv.style.left) + 5 + 'px'; } </script>приложение
Используйте таймеры, чтобы настроить последовательность событий
[1] В веб -разработке событие сначала происходит в детском элементе, а затем пузыряется до родительского элемента, то есть функция обратного вызовов событий детского элемента будет запускаться раньше, чем функция обратного вызова событий родительского элемента. Если сначала мы позволим функции обратного вызова родительского элемента, нам нужно использовать SetTimeout (F, 0)
При нормальных обстоятельствах нажмите на элемент Div, сначала всплывает 0, затем всплывает 1
<div id = "mydiv" style = "height: 100px; width: 100px; фоновое цветное: pink;"> </div> <script> mydiv.onclick = function () {alert (0);} document.onclick = function () {alert (1);} </script> document.onclick = function () {alert (1);Если вы хотите сначала произойти событие документа OnClick, то есть нажмите на элемент DIV, первым появится 1, а затем появится 0. Затем сделайте следующие настройки
<div id = "mydiv" style = "height: 100px; width: 100px; фоновый цвет: pink;"> </div> <script> mydiv.onclick = function () {settimeout (function () {alert (0);})} document.onclick = function () {alert (1);【2】 Пользовательская функция обратного вызова, обычно запускаемой перед действием по умолчанию браузера. Например, если пользователь входит в текст в поле ввода, событие Keypress будет запускается до того, как браузер получит текст. Следовательно, следующая функция обратного вызова не может достичь своей цели
<input type = "text" id = "myInput"> <Script> myInput.onkepress = function (event) {this.value = this.value.touppercase ();} </script>Приведенный выше код хочет преобразовать символы в капитализацию сразу после того, как пользователь входит в текст. Но на самом деле, он может только преобразовать предыдущий символ в капитализацию, потому что в настоящее время браузер не получил текст, так что это. Значение не может получить новейший входной символ.
Только переписывая его с помощью SetTimeout, может работать вышеуказанный код
<input type = "text" id = "myInput"> <script> myInput.onkepress = function (event) {setTimeout (function () {myInput.value = myInput.value.touppercase ();});} </script>Код заканчивается здесь. Следующая статья представит его вам
Серия BOM: запрос анимации
Третий применение таймера серии BOM (часы, отсчет времени, секундомер и будильник)
Выше приведено первое время Settimeout и SetInterval серии Bom, введенная вам редактором. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!