Функция тайм аут

Обновлено: 02.07.2024

JavaScript timeout представляет собой нативную javascript-функцию , которая исполняет фрагмент кода после установленной временной задержки ( в миллисекундах ). Это может пригодиться, когда нужно вывести всплывающее окошко после того, как пользователь провел некоторое время на вашей странице. Или нужно, чтобы эффект при наведении курсора на элемент запускался лишь спустя какое-то время. Таким образом, можно избежать непреднамеренного запуска эффекта, если пользователь навел курсор случайно.

Простой пример setTimeout

Чтобы продемонстрировать действие этой функции, предлагаю взглянуть на следующее демо, в котором всплывающее окно появляется спустя две секунды после клика по кнопке.

Синтаксис

В документации MDN приведен следующий синтаксис для setTimeout :

timeoutID – числовой id , который можно использовать в сочетании с clearTimeout() для отключения таймера;
func – функция, которая должна быть выполнена;
code ( в альтернативном синтаксисе ) – строка кода, которую нужно исполнить;
delay – длительность задержки в миллисекундах, после которой будет запущена функция. По умолчанию установлено значение 0.

setTimeout vs window.setTimeout

В приведенном выше синтаксисе используется window.setTimeout . Почему?

На самом деле, setTimeout и window.setTimeout – это практически одна и та же функция. Единственная разница заключается в том, что во втором выражении мы используем метод setTimeout как свойство глобального объекта window .

Лично я считаю, что это лишь сильно усложняет код. Если бы мы определили альтернативный метод JavaScript timeout , который может быть найден и возвращен в приоритетном порядке, то столкнулись бы с еще большими проблемами.

В данном руководстве я не хочу связываться с объектом window , но в целом, вы сами решаете, какой синтаксис стоит использовать.

Примеры использования

setTimeout принимает ссылки на функцию в качестве первого аргумента.

Это может быть название функции:

Переменная, которая обращается к функции:

Или же анонимная функция:

Но я не рекомендую так делать по следующим причинам:

Такой код плохо воспринимается, а, следовательно, его сложно будет модернизировать или отладить;
Он предполагает использование метода eval() , который может стать потенциальной уязвимостью;
Этот метод работает медленнее других, так как ему требуется запускать JavaScript-интерпретатор .

Также обратите внимание, что для тестирования кода мы используем метод alert для JavaScript timeout .

Передаем параметры в setTimout

В первом ( к тому же, кроссбраузерном ) варианте мы передаем параметры в callback-функцию , исполняемую при помощи setTimeout .

В следующем примере мы выделяем случайное приветствие из массива greetings и передаем его в качестве параметра функции greet() , которая исполняется setTimeout с задержкой в 1 секунду:

Альтернативный метод

В синтаксисе, приведенном в начале статьи, существует еще один метод, с помощью которого можно передать параметры в callback-функцию , исполняемую JavaScript timeout . Данный метод подразумевает под собой вывод всех параметров, следующих после задержки.

Опираясь на предыдущий пример, мы получаем:

Этот метод не будет работать в IE 9 и ниже, где передаваемые параметры расцениваются как undefined . Но для решения этой проблемы на MDN есть специальный полифилл .

Сопутствующие проблемы и “this”

Код, исполняемый setTimeout , запускается отдельно от функции, которой он был вызван. Из-за этого мы сталкиваемся с определенными проблемами, в качестве решения которых можно использовать ключевое слово this .

Чтобы избавиться от этой нестыковки, можно воспользоваться несколькими методами:

Принудительно установить значение this

Примечание: метод bind был представлен в ECMAScript 5 , а значит, что он будет работать только в современных браузерах. В других при его применении вы получите ошибку выполнения JavaScript « function timeout error » .

Использовать библиотеку

Многие библиотеки включают в себя встроенные функции, необходимые для решения проблемы с this . Например, метод jQuery.proxy() . Он берет функцию и возвращает новую, в которой всегда будет использовать определенный контекст. В нашем случае, контекстом будет:

Отключение таймера

Возвращенное значение setTimeout представляет собой числовой id , который можно использовать для отключения таймера при помощи функции clearTimeout() :

Давайте посмотрим на нее в действии. В следующем примере, если кликнуть по кнопке « Start countdown », начнется обратный отсчет. После того, как он завершится, котята получат свое. Но если нажать кнопку « Stop countdown », таймер JavaScript timeout будет остановлен и сброшен.

Подведем итоги

setTimeout – асинхронная функция, а это значит, что полученное обращение к этой функции попадает в очередь, и будет исполнено только после того, как завершатся все остальные действия в стеке. Она не может работать одновременно с другими функциями или отдельным потоком:

Многие также путают использование JavaScript-функции setTimeout , и jQuery-метода delay . Метод delay предназначен для установки временной задержки между методами в заданной очереди jQuery . Задержку отметить невозможно.

К примеру, если вы хотите затемнить изображение на секунду, сделать его видимым на 5 секунд, а затем снова затемнить на 1 секунду, то придется сделать следующее:

Все же лучше использовать JavaScript timeout для чего-то другого.

Если вам нужно повторить ранее использованный код после временной задержки, то для этих целей более уместной будет функция setInterval .

В завершение

В этой статье я попытался показать, как использовать setTimeout для отсрочки исполнения функции. К тому же я рассказал, как вносить параметры в setTimeout , работать со значением this внутри callback-функции и об отмене таймера.

Этот метод выполняет код(или функцию), указанный в первом аргументе, асинхронно, с задержкой в delay миллисекунд.

В отличие от метода setInterval, setTimeout выполняет код только один раз.

В каком виде указывать первый параметр - в виде строки кода или функции - разницы нет.

Следующие два вызова работают одинаково:

При указании строки кода - интерпретатор динамически создает анонимную функцию с телом из данной строки. Но более правильным считается объявление функции в явном виде, например так:

Вызов со строкой существует для совместимости с прежними версиями javascript.

Контекст выполнения, this

Функция выполняется в другом контексте, отличном от контекста, в котором задается setTimeout .

При этом значение this = window , поэтому о передаче правильного this надо позаботиться отдельно.

Можно указать this явно, используя промежуточную функцию.

Как правило, this передаетcя через замыкание. Для этого используется промежуточная переменная во внешней функции, которой присваивается this :

Отмена выполнения

Вы можете отменить выполнение setTimeout при помощи clearTimeout, используя для этого идентификатор таймаута.

Минимальная задержка

Минимально возможная задержка в разных браузерах варьируется. В среднем на момент написания этого текста (январь 2011) она составляет 12 мс. То есть, разницы между setTimeout(. 1) и setTimeout(. 12) , как правило, нет.

Производительность

Большое количество таймеров может привести к серьезной нагрузке на процессор.

Это в первую очередь касается приложений, в которых одновременно анимируется большое количество объектов. В этом случае, по возможности, следует использовать один таймер, который выполняет всю анимацию, а не множество независимых.

См. также

Единственное место, где нашел корректную передачу контекста в setTimeout!
Существует ли аналогичный способ передачи контекста в анонимно определенную функцию: function()<. /*this - window*/ . >

Илья, Спасибо.
Евгений.

Для передачи контекста используются либо call/apply, либо промежуточная переменная в самой функции, которая заранее ставится в нужное значение.

За clearTimeout() отдельное спасибо!

А как передать объект?

Если что-то нужно делать до определенных пор, тогда прописываем все в одной функции и не паримся. Выполнение итераций происходит последовательно с промежутком времени 60 микросекунд. + реализована передача параметра от функции её преемнице.

1. Не микро, а миллисекунд.
2. Этот код будет генерировать 25-30 таймеров в секунду не очищая их, вместо того, чтобы использовать всего-лишь 1 объект setInterval, щелкающий через необходимые вам 60 мс и выполняющий нужные проверки. Или в чем суть то была?

Весьма желательно запоминать все идентификаторы таймаутов, и после их срабатывания вызывать clearTimeout, иначе, после срабатывания большого количества таймаутов (

тысяч, в зав-ти от браузера) браузер начинает жутко тормозить - видать утекают какие-то ресурсы.

Рано или поздно может понадобиться передавать параметры в ту функцию, которая вызывается через указанный период времени. Делается это очень просто, все параметры указываются после миллисекунд и не нужно писать громоздкую функцию:

Такой синтаксис будет работать только в Firefox

работает даже в IE7-8

правильнее будет setInterval(function(), 1000);

Подскажите, почему не работает вот этот код:
var myPost = $('.post').hide();
for (var i = 0; i < myPost.length; i++) j=i;
setTimeout(function(j) myPost.eq(j).fadeIn(1000);
>,1000);
>;

Какой аргумент Вы ожидаете в callback-функции для setTimeout? Читайте про замыкания, функции и setTimeout.

JS видит, что установлен timeout. Через секунду он запускает функцию заданую в первом аргументе. Но он не передает в функцию никаких параметров, т.к. он даже не знает, что они там должны быть (потому что функция передается в setTimeout как простая переменная, или как ссылка на функцию, если хотите).
Почитай про замыкания. Вот приблизительное решение твоей проблемы:
var getFunctionForTimeout = function(j) var fn = function() alert(j);//или myPost.eq(j).fadeIn(1000);
>
return fn;//создано замыкание. мы возвращаем функцию, которая знает правильное значение j.
>
for (var i = 0; i <= 10; i++)

как при повторном вызове функции типа:

дождаться выполнения предыдущего вызова display?

Как вариант - использовать глобальную переменную-индикатор выполнения функции.

подскажите как выведенный текст после не заполненного поля убрать через заданное время
вот код
вывода ошибки не заполненного поля
// вывод заполнити поле Телефон пользователя
function testuserPhone () < var input=this; if (input.value!="") return;
var tips=document.createElement("SPAN");
tips.innerHTML="Пожалуйста заполните поле 'Телефон пользователя: '.";
var td=input.parentNode;
td.appendChild(tips);
>
function userPhone ( str ) // проверяет не осталось ли поле пустым
if (str == " ") onclick="userPhone(this.valid)"
alert ("Введите Телефон пользователя: ")
return false
>
return true
>

Подскажите как скрыть текст после указанного времени.
Чтоб он пропадал!

Поставь setTimeout(function() , 3000);
Соответственно, сам текст должен быть обрамлён в DIV с

Помогите, пожалуйста, с одной проблемой.
У меня 2 функции для выпадания и убирания слоя с информацией.
При помощи document.getElementById и setTimeout плавно изменяется значение top у слоя. Всё бы хорошо, но почему-то после одного выпада окна, при попытке вызвать его еще раз - ничего не выходит. Работает только после обновления страницы

доброго времени суток! пожалуйста подскажите, почему не работает?

В приведенном коде this.fadeIn(); срабатывает как вызов функции, а не как ссылка на нее.
Пробуй this.fadeIn - без ();

Помогите пожалуйста, как сделать чтобы видео начинало проигрываться не сразу, а через 2-3 секунды? на одном сайте заметил, что видео начинает подгружаться только через несколько секунд, в коде обнаружил: setTimeout("showIt()", 2000); // 1000 = 1 sec я еще пока чайник, подскажите как применить эту фишку?

Почему не работает данный код? Выводит только первое значение i через секунду после запуска и все.

var i =0;
function f() i++
document.write(i + "")
>
for (d=0; d<10; d++) setTimeout(f, 1000)
>

Потому что "document.write" очищает и начинает запись в пустом документе. Лучше сделать так

var user = 1;
setTimeout("func1("+user+")",1000)

Доброго времени дня, всем!

Я только начинаю учиться языку js. Прошу помощи.
Есть Код вызова popup окна на Mootols:

Подскажите, пожалуйста, как и куда вставить таймер вызова этого окна.
Чтоб оно загружалось, скажем, через минуту, после загрузки страницы.
И еще хочется только одноразового появления. Как завязать этот код с куками?
Заранее благодарен.

Спасибо за хороший сайт, очень часто им пользуюсь.

Прочитал статью, но не нашел ответа на свой вопрос.

Работаю с setTimeout() и clearTimeout().

К примеру, у меня есть 2 ячейки в Таблице с Желтым фоновым цветом. При нажатии на ячейку, цвет после 1.5 секунды меняется на Белый.

Однако, если нажать на 2-ю ячейку раньше окончания Задержки, меняется цвет только последней.

clearTimeout() добавлен для сброса Задержки в случае, если в ячейку нажать повторно.

Подскажите, пожалуйста, как поступить в данном случае ?

Всё тут дело в "clearTimeout"-е. И даже не столько в нём, сколько в глобальной переменной, куда сохраняется идентификатор таймера. Когда вызывается "invisible", значение, сохранённое в "timeOut"-е, используется для очищения таймера. Если, например, мы нажали на нашу ячейку, предыдущий таймер сбросится, и зарегистрируется новый таймер. Если этот новый таймер ещё не сработал, а мы снова нажали на ту же ячейку, значение нашего нового таймера опять же сбросится, чтобы зарегистрировался ещё один(так вы, кажется, хотели предотвратить задержку при повторном нажатии на ту же ячейку). Беда в том, что переменная одна, и когда при нажатии на одну ячейку регистрируется один таймер, нажатие на второй сбросит тот же таймер, что и в первой(потому что функция "invisible", хоть и вызывается для разных ячеек, оперирует одной глобальной переменной для хранения и сброса таймера).

Решение состоит в том, чтобы убрать "clearTimeout", так как по истечении срока функция, отложенная "setTimeout"-ом, всё равно не вызовется ещё раз и вызывать "clearTimeout" для отмены не нужно. В этом случае предыдущая покраска ячейки не отменится: ведь, если мы используем одну глобальную переменную, то, как я уже объяснил, при каждом вызове нашей ф-ции сбрасываться будет таймер, установленный самой ф-цией в ту самую глоб. переменную, и покраска ячейки при таком сбросе будет отменяться, а планироваться будет уже покраска той ячейки, на которую мы щёлкнули до выполнения предыдущего таймера. Если же убрать "clearTimeout", щелчок по ячейке будет планироваться каждый раз заново, что для щелчков по разным ячейкам решает проблему. Если мы хотим сбросить таймер при повторном нажатии на ту же ячейку, лучше проверить, не покрашена ли эта ячейка в нужный цвет. Если покрашена, ничего делать не нужно. Иначе мы регистрируем отложенный вызов функции "setTimeout"-ом без сброса таймера, т.к. ф-ция всё равно выполнится лишь один раз.

То есть, нужно убрать "clearTimeout", а чтобы не регистрировать отложенных вызовов лишний раз, проверить, не сделана ли требуемая работа, вот и всё.

У меня вопрос и я не знаю, что делать. Мне нужна помошь.
Где взять готовый js.
Задача такая. Нужно, что бы после того, как заходишь на сайт, гдето секунд через 10 срабатывала левая кнопка мыши автоматически. Один раз.
Заранее спасибо.

Существует метод click(), который, правда, не работает в хроме.
document.getElementById("EL_ID").click(); или (если нужно кликнуть прямо по документу) - document.body.click(); / document.documentElement.click(); (в зависимости от задачи).

Рецепт готового JS:
Берем базовый массив, заворачиваем в него три не пустых объекта, кладем на правую кнопку мыши и ждем 20 минут. В этот момент обязательно произносим RTFM каждые 70 секунд.

ar j = jQuery.noConflict();

kruglyakov

Если правильно понимаю смысл этого кода, то надо вызов setTimeout('online()', '30000'); вынести за пределы функции online. Она же у Вас никем не вызывается.

Как сюда еще добавить кнопку чтобы нажал на кнопку и приостановить время потом еще раз нажал на нее и время дальше пошло
Например задали мы 50 сек, прошло 31 и нажали кнопку приостановить потом еще раз на нее нажали и отчет начал доходить остальные 19 секунд..

как реализовать вывод модального окна с вопросом (вопрос после кнопки ОК отправляется на почту), если клиент закрывает страницу до 5 секунд?

Как при рекурсивном вызове setTimeout, получить идентификатор последнего вызванного, что бы прибить его, не прибегая к сохранению этого значения в глобальной переменной?
Т.к. в моем случае, setTimeout зашит в функцию, которая может быть одновременно запущена несколько раз и как определит какой из тайм-аутов нужно прервать.

Нашел не очень красивое решение:

function wa2(kuda,st1,obj) .
obj.a = setTimeout(function(),1000);
>

Помогите пожалуйста: голова разрывается

Из php приходит переменная со значением 1349136703000(к примеру) далее активируется функция где timestamp = 1349136703000

Данная функция выводит время и секунды тикают: Tue Oct 02 2012 00:16:05 GMT+0600

Но проблема в другом, КОГДА ПРИХОДИТ НОВАЯ ПЕРЕМЕННАЯ С НОВЫМ ЗНАЧЕНИЕМ НА ЭКРАНЕ МОРГАЮТ СРАЗУ ДВА ВРЕМЕНИ ЧЕРЕЗ КАЖДУЮ СЕКУНДУ, как убить

зависимый от предыдущей глобальной переменной?

Подскажите пожалуйста, как сделать чтобы моя функция срабатывала через каждые 10 сек. 15 раз подряд?
вот моя функция:

function a() var par = document.getElementById("green");
if (parseInt(par.style.left <800px)
par.style.left=5+parseInt(par.style.left);
setTimeout=("a,50");
>

подскажите пожалуста в чем ошибка.

Поделюсь маленьким рецептом на решение проблемы сброса стиля после отправки формы с помощью AJAX (может не правильно сказал, но по коду будет понятнее):

То есть, после отправки формы появляется одна из надписей, стоит какое-то время, потом исчезает. Вот и все. Может кому-то пригодится )))
P.S. Запары с .hide() и .show() нужны для облегчения работы верстальщиков,дабы не ковырять код

Вопрос такой, можно ли с помощью этой функции добавить 2 строки кода через 5 секунд?
Мне нужно что бы эти две строки подгрузились в странице через 5 секунд запустив этим слайдер

Здравствуйте, скажите пожалуйста, а как мне сделать чтобы предмет на локации был видим, при клике по нему, он станет скрыт а через 5 секунд скажем с ново появится, и с ново можно использовать тоже самое. вот такой у меня скрипт:
[code]
[%if location.id == 'acb1e8626aad4e248cce4236d5f69005'%] // моя локация

// сама картинка предмета // действия после клика по предмету. Я так понимаю ниже должна быть строчка про setTimeout().
[%end%]
[/code]

Прошу помощи доделать этот кусок скрипта.

А как написать, сколько осталось времени до начала выполнения функции editInput()?

Подскажите, если есть идентификатор установленного тайм-аута, то можно ли как-то у него спросить сколько ещё осталось времени до срабатывания?

P.S. Считать секунды отдельно, снимать и устанавливать таймер заново - сильно не хочется. Есть метод?

Это наверное глупо сюда писать, но у меня не работает код:

Может я плохо прочитал статью ?

подскажите, как скрыть элемент после обновление странице, когда форма отправлятся metodom post, без ajax. Нужно убрать некоторые вещи сверху над формой, после отправки

всем добрый день хотел узнать а можно допустим есть у меня кнопка которая появляется когда посетитель заходит на сайт и исчезает когда ее нажали но она работает толка тогда когда посетители есть на сайте. вопрос такой надо чтоб да пустим данная кнопка появлялась не тогда когда кто та посетил страницу а имена в указное время не зависима от посетителей можете примерна подсказать как это сделать

Почему aleart берёста на кавычках, если код будет между кавычках то это ж будет текстовым значениям и код не будет работать

Подскажите пожалуйста в чём ошибка , хочу чтобы блоки анимировались с задержкой после загрузки страницы :

Спешу заметить, что документация по setTimeout не полная.
После 2ого аргумента (задержки) мы можем указать любое количество констант или переменных, значения которых пойдут в качестве аргументов в вызывавемую функцию.

Все перепробовал, но так и не сработало.
Подскажите, пожалуйста, как правильно в данном случае. Спасибо.

А как сделать, если, например, я хочу, чтобы при определенных действиях остановился запущенный ранее setInterval, а потом спустя определенное время, снова возобновился?

Следующий код мне кажется более логичным.

А скажите пожалуйста, в чем разница -

Доброго времени суток, подскажите пожалуйста как остановить setTimeout после первого обновления?

Добрый день! Подскажите пожалуйста по какой причине данный код не дожидаясь клика срабатывает через 5000 мс.:

Вызов функции или выполнение фрагмента кода после указанной задержки.

Синтаксис

timeoutID - это числовой ID, который может быть использован позже с window.clearTimeout() (en-US) .
func - это функция, которую требуется вызвать после delay миллисекунд.
code - в альтернативном варианте применения это строка, содержащая код, который вы хотите выполнить после delay миллисекунд (использовать этот метод не рекомендуется по тем же причинам, что и eval())
delay Необязательный - задержка в миллисекундах (тысячных долях секунды), после которой будет выполнен вызов функции. Реальная задержка может быть больше; см. Notes ниже.

Необходимо принять во внимание, что передача дополнительных параметров функции в первом варианте не работает в Internet Explorer 9 и ниже. Для использования этой функциональности в таких браузерах, необходимо использовать код для совместимости (см. раздел Аргументы колбэк-функции).

Important: Prior to Gecko 13 (Firefox 13.0 / Thunderbird 13.0 / SeaMonkey 2.10), Gecko passed an extra parameter to the callback routine, indicating the "actual lateness" of the timeout in milliseconds. This non-standard parameter is no longer passed.

Пример

В следующем примере на веб странице создаются две простые кнопки, к которым привязываются действия setTimeout и clearTimeout. Нажатие на первую кнопку установит таймаут, который вызовет диалоговое окно через две секунды. Также будет сохранён id для clearTimeout. Таймаут также может быть отменён по нажатию на вторую кнопку.

HTML Content

JavaScript Content

Аргументы колбэк-функции

Если вам нужно передать аргумент в вашу callback функцию, но нужно, чтобы это работало в Internet Explorer 9 и ниже, который не поддерживает передачу дополнительных параметров (ни с setTimeout() или setInterval() ), то вы можете прописать специальный код для совместимости с IE, вставив этот код в начало ваших скриптов , который включит функцию передачи стандартных параметров HTML5 в Internet Explorer для обоих таймеров .

Правка только для IE

If you want a completely unobtrusive hack for every other mobile or desktop browser, including IE 9 and below, you can either use JavaScript conditional comments:

Или используйте очень чистый подход, основанный на условном свойстве IE HTML :

Another possibility is to use an anonymous function to call your callback, but this solution is a bit more expensive. Example:

Yet another possibility is to use function's bind. Example:

Проблема с " this "

Когда вы передаёте метод в setTimeout() (или в любую другую функцию, если на то пошло), то вызов будет осуществлён с неправильным значением this . Эта проблема разъясняется детально в JavaScript reference.

Объяснение

Code executed by setTimeout() is run in a separate execution context to the function from which it was called. As a consequence, the this keyword for the called function will be set to the window (or global ) object; it will not be the same as the this value for the function that called setTimeout . See the following example:

Как видите, нет способов передать объект this в колбэк-функцию. .

Возможное решение

A possible way to solve the " this " problem is to replace the two native setTimeout() or setInterval() global functions with two non-native ones which will enable their invocation through the Function.prototype.call method. The following example shows a possible replacement:

Note: These two replacements will also enable the HTML5 standard passage of arbitrary arguments to the callback functions of timers in IE. So they can be used as polyfills also. See the Callback arguments paragraph.

Новая тестируемая особенность:

Это не нативные решения ad hoc для этой проблемы.

Note: JavaScript 1.8.5 introduces the Function.prototype.bind() method, which lets you specify the value that should be used as this for all calls to a given function. This lets you easily bypass problems where it's unclear what this will be, depending on the context from which your function was called.

Замечания

Отложенное выполнение кода можно отменить, используя window.clearTimeout() . Если функция должна вызываться неоднократно (например, каждые N миллисекунд), необходимо использовать window.setInterval() .

Важно заметить, что функция или код не могут быть выполнены, пока не завершится поток, вызвавший setTimeout() .

Passing string literals

Передача строки вместо функции в setTimeout() сопряжена с теми же опасностями, что и использование eval.

String literals are evaluated in the global context, so local symbols in the context where setTimeout() was called will not be available when the string is evaluated as code.

Минимальная/ максимальная задержка и вложенность таймаута

Historically browsers implement setTimeout() "clamping": successive setTimeout() calls with delay smaller than the "minimum delay" limit are forced to use at least the minimum delay. The minimum delay, DOM_MIN_TIMEOUT_VALUE , is 4 ms (stored in a preference in Firefox: dom.min_timeout_value ), with a DOM_CLAMP_TIMEOUT_NESTING_LEVEL of 5ms.

In fact, 4ms is specified by the HTML5 spec and is consistent across browsers released in 2010 and onward. Prior to (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2), the minimum timeout value for nested timeouts was 10 ms.

In addition to "clamping", the timeout can also fire later when the page (or the OS/browser itself) is busy with other tasks.

To implement a 0 ms timeout in a modern browser, you can use window.postMessage() as described here.

Browsers including Internet Explorer, Chrome, Safari, and Firefox store the delay as a 32-bit signed Integer internally. This causes an Integer overflow when using delays larger than 2147483647, resulting in the timeout being executed immediately.

The global setTimeout() method sets a timer which executes a function or specified piece of code once the timer expires.

Syntax

Parameters

A function to be executed after the timer expires.

An alternative syntax that allows you to include a string instead of a function, which is compiled and executed when the timer expires. This syntax is not recommended for the same reasons that make using eval() a security risk.

The time, in milliseconds that the timer should wait before the specified function or code is executed. If this parameter is omitted, a value of 0 is used, meaning execute "immediately", or more accurately, the next event cycle. Note that in either case, the actual delay may be longer than intended; see Reasons for delays longer than specified below.

arg1, . argN Optional

Additional arguments which are passed through to the function specified by function .

Return value

The returned timeoutID is a positive integer value which identifies the timer created by the call to setTimeout() . This value can be passed to clearTimeout() to cancel the timeout.

It is guaranteed that a timeoutID value will never be reused by a subsequent call to setTimeout() or setInterval() on the same object (a window or a worker). However, different objects use separate pools of IDs.

Description

Timeouts are cancelled using clearTimeout() .

To call a function repeatedly (e.g., every N milliseconds), consider using setInterval() .

Working with asynchronous functions

setTimeout() is an asynchronous function, meaning that the timer function will not pause execution of other functions in the functions stack. In other words, you cannot use setTimeout() to create a "pause" before the next function in the function stack fires.

See the following example:

Notice that the first function does not create a 5-second "pause" before calling the second function. Instead, the first function is called, but waits 5 seconds to execute. While the first function is waiting to execute, the second function is called, and a 3-second wait is applied to the second function before it executes. Since neither the first nor the second function's timers have completed, the third function is called and completes its execution first. Then the second follows. Then finally the first function is executed after its timer finally completes.

To create a progression in which one function only fires after the completion of another function, see the documentation on Promises.

The "this" problem

When you pass a method to setTimeout() , it will be invoked with a this value that may differ from your expectation. The general issue is explained in detail in the JavaScript reference.

Code executed by setTimeout() is called from an execution context separate from the function from which setTimeout was called. The usual rules for setting the this keyword for the called function apply, and if you have not set this in the call or with bind , it will default to the window (or global ) object. It will not be the same as the this value for the function that called setTimeout .

See the following example:

The above works because when myMethod is called, its this is set to myArray by the call, so within the function, this[sProperty] is equivalent to myArray[sProperty] . However, in the following:

The myArray.myMethod function is passed to setTimeout , then when it's called, its this is not set so it defaults to the window object.

There's also no option to pass a thisArg to setTimeout as there is in Array methods such as forEach() and reduce() . As shown below, using call to set this doesn't work either.

Solutions

Use a wrapper function

A common way to solve the problem is to use a wrapper function that sets this to the required value:

The wrapper function can be an arrow function:

Use bind()

Alternatively, you can use bind() to set the value of this for all calls to a given function:

Passing string literals

Passing a string instead of a function to setTimeout() has the same problems as using eval() .

A string passed to setTimeout() is evaluated in the global context, so local symbols in the context where setTimeout() was called will not be available when the string is evaluated as code.

Reasons for delays longer than specified

There are a number of reasons why a timeout may take longer to fire than anticipated. This section describes the most common reasons.

Nested timeouts

As specified in the HTML standard, browsers will enforce a minimum timeout of 4 milliseconds once a nested call to setTimeout has been scheduled 5 times.

This can be seen in the following example, in which we nest a call to setTimeout with a delay of 0 milliseconds, and log the delay each time the handler is called. The first four times, the delay is approximately 0 milliseconds, and after that it is approximately 4 milliseconds:

Timeouts in inactive tabs

To reduce the load (and associated battery usage) from background tabs, browsers will enforce a minimum timeout delay in inactive tabs. It may also be waived if a page is playing sound using a Web Audio API AudioContext .

The specifics of this are browser-dependent:

Firefox Desktop and Chrome both have a minimum timeout of 1 second for inactive tabs.
Firefox for Android has a minimum timeout of 15 minutes for inactive tabs and may unload them entirely.
Firefox does not throttle inactive tabs if the tab contains an AudioContext .

Throttling of tracking scripts

Firefox enforces additional throttling for scripts that it recognises as tracking scripts. When running in the foreground, the throttling minimum delay is still 4ms. In background tabs, however, the throttling minimum delay is 10,000 ms, or 10 seconds, which comes into effect 30 seconds after a document has first loaded.

Late timeouts

The timeout can also fire later than expected if the page (or the OS/browser) is busy with other tasks. One important case to note is that the function or code snippet cannot be executed until the thread that called setTimeout() has terminated. For example:

Will write to the console:

This is because even though setTimeout was called with a delay of zero, it's placed on a queue and scheduled to run at the next opportunity; not immediately. Currently-executing code must complete before functions on the queue are executed, thus the resulting execution order may not be as expected.

Deferral of timeouts during pageload

Firefox will defer firing setTimeout() timers while the current tab is loading. Firing is deferred until the main thread is deemed idle (similar to window.requestIdleCallback()), or until the load event is fired.

WebExtension background pages and timers

In WebExtensions, setTimeout() does not work reliably. Extension authors should use the alarms API instead.

Maximum delay value

Browsers including Internet Explorer, Chrome, Safari, and Firefox store the delay as a 32-bit signed integer internally. This causes an integer overflow when using delays larger than 2,147,483,647 ms (about 24.8 days), resulting in the timeout being executed immediately.

Examples

Setting and clearing timeouts

The following example sets up two simple buttons in a web page and hooks them to the setTimeout() and clearTimeout() routines. Pressing the first button will set a timeout which shows a message after two seconds and stores the timeout id for use by clearTimeout() . You may optionally cancel this timeout by pressing on the second button.

Читайте также: