Передача параметра в javascrippt setTimeout (замыкания)


Содержание

Передача параметров в замыкание для setTimeout

Я столкнулся с проблемой, когда мое приложение живет в iframe, и оно вызывается из внешнего домена. IE9 не будет запускать событие загрузки, когда iframe загружается правильно, поэтому я думаю, что застрял, используя setTimeout для опроса страницы.

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

Я продолжаю получать LOG: undefined в консоли IE9.

Какой правильный метод для этого?

Это происходит потому, что вы не приближаетесь к значению i в своей func . Когда цикл завершен, i 8 ( timings.length ), которого нет в массиве.

Вам нужно сделать что-то вроде этого:

Когда ваша функция будет вызвана setTimeout когда-нибудь в будущем, значение i уже будет увеличено до конца диапазона с помощью цикла for так console.log(timings[i]); отчеты undefined .

Чтобы использовать i в этой функции, вам нужно захватить ее в закрытии функции. Есть несколько способов сделать это. Я бы предложил использовать самозапускающуюся функцию для получения значения i например:

В качестве небольшого пояснения для того, кто это работает: i передаю самовыполняющейся функции в качестве первого аргумента этой функции. Этот первый аргумент называется index и замораживается при каждом вызове самозапускающейся функции, поэтому цикл for не вызывает его изменения до выполнения обратного вызова setTimeout . Таким образом, ссылка на index внутри самовыполняющейся функции получит правильное значение индекса массива для каждого обратного вызова setTimeout .

Передача аргументов вместе с setTimeout()

тото же самое и для setInterval();
У меня, в IE5 — ничего не передаётся!
Почему?
И как всё же передать значение вызываемой функции?!

26.07.2009, 17:35

Передача аргументов для функции Function()
Доброго всем вечера. Изучая JS я пробую написать секундомер. Код: 4 26.07.2009, 18:24 2 26.07.2009, 18:34 [ТС] 3 26.07.2009, 19:19 4

Вопрос был плохо сформулирован и я его неправильно понял.

Ты удивишься, но код setTimeout(функция, миллисекунды, arg1, arg2); работает. Но только не в MSIE, а в Netscape 4 и Mozilla. Реализация функции setTimeout в этих браузерах различается.

В качестве решения предлагаю либо использовать глобальные переменные. Тогда перед вызовом setTimeout должна будет их инициализировать. Либо формировать строку кода динамически:

Scheduling: setTimeout and setInterval

We may decide to execute a function not right now, but at a certain time later. That’s called “scheduling a call”.

There are two methods for it:

  • setTimeout allows us to run a function once after the interval of time.
  • setInterval allows us to run a function repeatedly, starting after the interval of time, then repeating continuously at that interval.

These methods are not a part of JavaScript specification. But most environments have the internal scheduler and provide these methods. In particular, they are supported in all browsers and Node.js.

setTimeout

func|code Function or a string of code to execute. Usually, that’s a function. For historical reasons, a string of code can be passed, but that’s not recommended. delay The delay before run, in milliseconds (1000 ms = 1 second), by default 0. arg1 , arg2 … Arguments for the function (not supported in IE9-)

For instance, this code calls sayHi() after one second:

If the first argument is a string, then JavaScript creates a function from it.

So, this will also work:

But using strings is not recommended, use arrow functions instead of them, like this:

Novice developers sometimes make a mistake by adding brackets () after the function:

That doesn’t work, because setTimeout expects a reference to a function. And here sayHi() runs the function, and the result of its execution is passed to setTimeout . In our case the result of sayHi() is undefined (the function returns nothing), so nothing is scheduled.

Canceling with clearTimeout

A call to setTimeout returns a “timer identifier” timerId that we can use to cancel the execution.

The syntax to cancel:

In the code below, we schedule the function and then cancel it (changed our mind). As a result, nothing happens:

As we can see from alert output, in a browser the timer identifier is a number. In other environments, this can be something else. For instance, Node.js returns a timer object with additional methods.

Again, there is no universal specification for these methods, so that’s fine.

For browsers, timers are described in the timers section of HTML5 standard.

setInterval

The setInterval method has the same syntax as setTimeout :

All arguments have the same meaning. But unlike setTimeout it runs the function not only once, but regularly after the given interval of time.

To stop further calls, we should call clearInterval(timerId) .

The following example will show the message every 2 seconds. After 5 seconds, the output is stopped:

In most browsers, including Chrome and Firefox the internal timer continues “ticking” while showing alert/confirm/prompt .

So if you run the code above and don’t dismiss the alert window for some time, then in the next alert will be shown immediately as you do it. The actual interval between alerts will be shorter than 2 seconds.

Nested setTimeout

There are two ways of running something regularly.

One is setInterval . The other one is a nested setTimeout , like this:

The setTimeout above schedules the next call right at the end of the current one (*) .

The nested setTimeout is a more flexible method than setInterval . This way the next call may be scheduled differently, depending on the results of the current one.

For instance, we need to write a service that sends a request to the server every 5 seconds asking for data, but in case the server is overloaded, it should increase the interval to 10, 20, 40 seconds…

Here’s the pseudocode:

And if the functions that we’re scheduling are CPU-hungry, then we can measure the time taken by the execution and plan the next call sooner or later.

Nested setTimeout allows to set the delay between the executions more precisely than setInterval .

Let’s compare two code fragments. The first one uses setInterval :

The second one uses nested setTimeout :

For setInterval the internal scheduler will run func(i++) every 100ms:

The real delay between func calls for setInterval is less than in the code!

That’s normal, because the time taken by func ‘s execution “consumes” a part of the interval.

It is possible that func ‘s execution turns out to be longer than we expected and takes more than 100ms.

In this case the engine waits for func to complete, then checks the scheduler and if the time is up, runs it again immediately.

In the edge case, if the function always executes longer than delay ms, then the calls will happen without a pause at all.

And here is the picture for the nested setTimeout :

The nested setTimeout guarantees the fixed delay (here 100ms).

That’s because a new call is planned at the end of the previous one.

When a function is passed in setInterval/setTimeout , an internal reference is created to it and saved in the scheduler. It prevents the function from being garbage collected, even if there are no other references to it.

For setInterval the function stays in memory until clearInterval is called.

There’s a side-effect. A function references the outer lexical environment, so, while it lives, outer variables live too. They may take much more memory than the function itself. So when we don’t need the scheduled function anymore, it’s better to cancel it, even if it’s very small.

Zero delay setTimeout


There’s a special use case: setTimeout(func, 0) , or just setTimeout(func) .

This schedules the execution of func as soon as possible. But the scheduler will invoke it only after the currently executing script is complete.

So the function is scheduled to run “right after” the current script.

For instance, this outputs “Hello”, then immediately “World”:

The first line “puts the call into calendar after 0ms”. But the scheduler will only “check the calendar” after the current script is complete, so «Hello» is first, and «World» – after it.

There are also advanced browser-related use cases of zero-delay timeout, that we’ll discuss in the chapter Event loop: microtasks and macrotasks.

In the browser, there’s a limitation of how often nested timers can run. The HTML5 standard says: “after five nested timers, the interval is forced to be at least 4 milliseconds.”.

Let’s demonstrate what it means with the example below. The setTimeout call in it re-schedules itself with zero delay. Each call remembers the real time from the previous one in the times array. What do the real delays look like? Let’s see:

First timers run immediately (just as written in the spec), and then we see 9, 15, 20, 24. . The 4+ ms obligatory delay between invocations comes into play.

The similar thing happens if we use setInterval instead of setTimeout : setInterval(f) runs f few times with zero-delay, and afterwards with 4+ ms delay.

That limitation comes from ancient times and many scripts rely on it, so it exists for historical reasons.

For server-side JavaScript, that limitation does not exist, and there exist other ways to schedule an immediate asynchronous job, like setImmediate for Node.js. So this note is browser-specific.

Илон Маск рекомендует:  Экспорт обновлений codenet ru

Summary

  • Methods setTimeout(func, delay, . args) and setInterval(func, delay, . args) allow us to run the func once/regularly after delay milliseconds.
  • To cancel the execution, we should call clearTimeout/clearInterval with the value returned by setTimeout/setInterval .
  • Nested setTimeout calls are a more flexible alternative to setInterval , allowing us to set the time between executions more precisely.
  • Zero delay scheduling with setTimeout(func, 0) (the same as setTimeout(func) ) is used to schedule the call “as soon as possible, but after the current script is complete”.
  • The browser limits the minimal delay for five or more nested call of setTimeout or for setInterval (after 5th call) to 4ms. That’s for historical reasons.

Please note that all scheduling methods do not guarantee the exact delay.

For example, the in-browser timer may slow down for a lot of reasons:

  • The CPU is overloaded.
  • The browser tab is in the background mode.
  • The laptop is on battery.

All that may increase the minimal timer resolution (the minimal delay) to 300ms or even 1000ms depending on the browser and OS-level performance settings.

Tasks

Output every second

Write a function printNumbers(from, to) that outputs a number every second, starting from from and ending with to .

Make two variants of the solution.

  1. Using setInterval .
  2. Using nested setTimeout .

solution

Всё только о JavaScript

setTimeout и setInterval

В JavaScript есть две функции для отложенного запуска кода: setTimeout и setInterval . Отличаются они тем, что setTimeout запускает код единожды, а setInterval — постоянно с заданной периодичностью.

Обе функции первым аргументом принимают строку кода, которую необходимо выполнить, или функцию, которую необходимо запустить. Второй аргумент задаёт задержку в миллисекундах. Возвращают обе функции идентификатор созданного таймера.

Обратите внимание, что строка кода — это именно строка, заключённая в кавычки, а не просто код. Впрочем передавать строку не рекомендуется. Она выполняется в глобальной области видимости, а скрипты, как правило, находятся в какой-нибудь локальной области, в результате строка кода, передаваемая в setTimeout / setInterval не имеет доступа к данным и функциям скрипта. Да и неудобно это — писать код внутри строки, он даже не подсвечивается.

Действие функций setTimeout и setInterval можно отменить функциями clearTimeout и clearInterval соответственно, передавая последним идентификатор отключаемого таймера.

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

Если в clearTimeout / clearInterval передан недействительный идентификатор, то ничего не произойдёт. Поэтому в примере выше можно не проверять, отработал ли уже таймер, и что вообще лежит в timerId.

Принцип работы таймеров в JavaScript

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

JavaScript язык однопоточный. Когда он выполняется в браузере, браузер никаких действий не производит. Если скрипт выполняется достаточно долго, становится заметно, что браузер «висит». Поэтому функция sleep вместе с приостановкой скрипта «вешала» бы браузер.

Вместо этого функции setTimeout / setInterval «делают отметку», что необходимо запустить некий код через столько-то миллисекунд, а скрипт продолжает работать своим чередом.

Из того, что язык однопоточный следует ещё одно следствие — код выполнится не через строго заданный промежуток времени, а не раньше, чем через этот промежуток. Если в нужный момент времени будет выполняться какой-либо код, то интерпретатор дождётся его окончания, после чего только запустит код по таймеру.

В Firefox функции setTimeout и setInterval передают своим callback-функциям один числовой параметр, равный количеству миллисекунд, на которые запоздал вызов функции.

К сожалению, в остальных браузерах данного функционала нет.

setTimeout()

Поддержка браузерами

4.0+ 4.0+ 1.0+ 1.0+ 4.0+ 1.0+

Описание

Функция setTimeout() вызывает функцию или выполняет переданный код после указанной задержки.

Примечание: данная функция вызывается на исполнение только один раз, если необходимо повторение выполнения действий через определённый промежуток времени воспользуйтесь функцией setInterval().

setTimeout() в циклах

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

Если хочется создать анимацию, то для этой цели необходимо использовать метод setInterval() .

Синтаксис

Аргументы

  • func: Имя функции, которая будет вызвана после указанной задержки.
  • code: Строка, содержащая JavaScript-код, который будет выполнен после указанной задержки.
  • delay: Задержка, указываемая в миллисекундах, по истечении которой будет выполнен вызов функции или переданный в виде строки код. Если аргумент, определяющий задержку, отсутствует, то используется значение задержки, установленное по умолчанию – 0.

Примечание: 1 секунда = 1000 миллисекунд

  • param1, param2, . : Параметры, которые будут переданы в качестве аргументов указанной функции.
  • Методы setTimeout и setInterval в Javascript

    Автор: Сергей Никонов

    Очень частый вопрос на собеседовании кандидата на должность веб-разработчик — Чем отличается setTimeout от setInterval. Важно не только знать чем отличается setTimeout от setInterval, но и понимать как можно использовать оба метода Javascript в задачах веб-программиста. В этой статье на примерах мы разберем что это за методы и чем они отличаются друг от друга

    Видеоурок к статье


    Введение

    Для того, чтобы понять чем отличается метод setTimeout от setInterval давайте на примерах разберем, как работают эти методы.

    Метод setTimeout

    Метод setTimeout служит для того, чтобы вы смогли выполнить какой-нибудь Javascript сценарий с определенным интервалом.

    Пример setTimeout:

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

    Создайте html файл с содержимым:

    В данном примере, мы создали структуру документа html, создали div с id settimeout и подключили библиотеку JQuery.

    Затем мы создали анонимный метод setTimeout и задали время выполнения через 10 секунд. Обратите внимание, что интервал задается в миллисекундах.

    Внутри метода мы говорим, что хотим в div с id settimeout вставить html с текстом «Я появился через 10 секунд после загрузки страницы».

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

    Метод setInterval

    В отличии от setTimeout, метод setInterval выполняется до тех пор, пока не будет вызван метод clearInterval.

    Для демонстрации метода setInterval, усложним немного пример.

    Наш пример будет состоять из двух файлом ajax.php в котором мы будем хранить массив и возвращать его в формате json.

    В файле index.html мы будем ajax’сом выводить новости из файла ajax.php с интервалом две секунды.

    В этом файле для примера мы будем хранить данные новостей. Первой строкой мы указываем кодировку utf-8 чтобы можно было корректно отображать русский язык. Далее мы создаем многомерный массив. И строкой json_encode мы преобразуем массив php в формат json для работы с этими данными в javascript.

    Теперь дополните созданный файл из прошлого примера index.html следующим кодом:

    Методом библиотеки Jquery $.ajax мы делаем фоновую загрузку данных из файла ajax.php. Далее мы создаем функцию setInterval где итеративно добавляем к переменной count единицу. Методом setInterval мы заменили цикл each, чтобы продемонстрировать setInterval.

    Методом Jquery append добавляем к div c id setinterval данные. Когда новости заканчиваются, мы очищаем метод setInterval clearInterval, для того, чтобы он больше не выполнялся.

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

    Выводы

    Методы setInterval и setTimeout используются очень часто в работе веб-программиста.

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

    Скачать примеры вы можете по этой ссылке.

    Подписывайтесь на наш канал Youtube, вступайте в группу VK. Также вы можете подписаться на нашу почтовую рассылку, чтобы быть в курсе о новых и полезных материалах для веб-разработчика.

    Для того, чтобы посмотреть видео, зарегистрируйтесь в личном кабинете

    Вопрос по tsql, sql-server, sql, group-by, sql-server-2008 &#8211 Групповой стол с 15-минутными интервалами

    T-SQL, SQL Server 2008 и выше

    Приведенный образец таблицы

    Мне нужно разбить это на представление, которое использует 15-минутные интервалы, например:

    Теперь я был в состоянии искать вокруг и найти некоторые запросы, которые сломаются, я нашел что-то подобное для MySqlВот :

    И кое-что для T-SQLВот

    Но во втором примере они суммируют результаты, тогда как мне нужно разделить общую продолжительность на интервал времени (900 секунд) по пользователю по статусу.

    Я смог адаптировать примеры во второй ссылке, чтобы разбить все на интервалы, но общее время продолжительности возвращается, и я не могу понять, как заставить делить интервалы (и все же суммировать с общей исходной продолжительностью).

    Заранее спасибо за любую информацию!

    редактировать: первая попытка

    редактировать: вторая попытка

    который сделает эту работу за вас, не требуя вспомогательных таблиц. (Я ничего не имею против вспомогательных таблиц, они полезны, и я их использую. Также иногда можно их не использовать.) Этот запрос позволяет начинать и заканчивать действия в любое время, даже если не целые минуты, заканчивающиеся на: 00, : 15,: 30,: 45. Если будут миллисекундные порции, вам придется поэкспериментировать, потому что, следуя вашей модели, я перешел ко второму разрешению.

    Если у вас есть известная жесткая максимальная продолжительность, то удалите @MaxDuration и замените его этим значением в минутах. N имеет решающее значение для выполнения запроса хорошо.

    Вот скрипт установки, если вы хотите попробовать это:

    Кроме того, вот версия, которая ожидает ТОЛЬКО времена, которые имеют целые минуты, заканчивающиеся в: 00,: 15,: 30 или: 45.

    Действительно, кажется, что окончательная строка 0 Duration не является правильной, потому что тогда вы не можете просто упорядочить по IntervalStart, так как есть дублирующие значения IntervalStart. В чем преимущество наличия строк, которые добавляют 0 к итогу?

    JavaScript метод WindowOrWorkerGlobalScope.setTimeout()

    Определение и применение

    JavaScript метод setTimeout() объекта WindowOrWorkerGlobalScope задает таймер, который выполняет функцию или указанный фрагмент кода по истечению срока заданного тайм-аута.

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

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

    Гарантируется, что идентификатор тайм-аута никогда не будет повторно использован последующим вызовом setTimeout(), или методом setInterval() для того же объекта (окна или рабочего объекта), однако, разные объекты используют отдельные пулы идентификаторов.

    Пул идентификаторов, используемых методами setTimeout() и setInterval() являются общими, что означает, что вы можете технически использовать методы clearTimeout() и clearInterval() взаимозаменяемо. Однако для ясности вам следует избегать этого.

    Поддержка браузерами

    Метод Chrome Firefox Opera Safari IExplorer Edge
    setTimeout() Да Да Да Да Да Да

    JavaScript синтаксис:

    Cпецификация

    Значения параметров

    Параметр Описание
    function Функция, которая будет выполняться после истечения таймера.
    delay Время в миллисекундах, которое таймер должен ждать перед выполнением указанной функции или кода. Если этот параметр опущен, то используется значение 0, оно означает, что выполнение должно произойти немедленно, или, точнее, как можно скорее (как только завершат работу все обработчики событий). Если этот параметр меньше 4, то используется значение 4. Обратите внимание, что в любом случае фактическая задержка может быть больше, чем предполагалось, причины задержек перечислены ниже в примерах.
    param1, . paramX Дополнительные параметры, передаваемые функции, указанной функцией или кодом, по истечении таймера. Передача дополнительных параметров функции в первом синтаксисе не работает в Internet Explorer 9 и ниже. Если вы хотите включить эту функцию в этом браузере, необходимо использовать полифилл.
    code Альтернативный синтаксис, который позволяет включать строку вместо функции, которая компилируется и выполняется по истечении таймера. Этот синтаксис не рекомендован к использованию в связи с угрозой безопасности.

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

    Базовое использование

    В этом примере с использованием атрибута событий onclick при нажатии на первую кнопку (HTML элемент ) вызываем функцию delayedInfo(), которая с использованием JavaScript метода setTimeout() задает таймер, который выполняет анонимную функцию по истечению 2000 миллисекунд (2 секунды).

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

    Результат нашего примера:

    Пример использования методов setTimeout() и clearTimeout() объекта WindowOrWorkerGlobalScope

    Проблема с this

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

    Код, выполняемый setTimeout(), вызывается из контекста выполнения, отдельного от функции, из которой был вызван setTimeout(). Обычные правила установки контекста для ключевого слова this для вызываемой функции применяются, и если вы не установили его явно в вызове или с определенной привязкой, то он по умолчанию будет глобальным (или оконным) объектом в нестрогом режиме или будет неопределенным в строгом режиме. Он не будет таким же, как this для функции, которая вызвала метод setTimeout(). Значение this по умолчанию метода setTimeout() по-прежнему будет объектом window , а не неопределенным, даже в строгом режиме. Давайте рассмотрим следующий пример:

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

    Передача строковых литералов

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

    Обратите внимание, что альтернативный синтаксис не рекомендован к использованию в связи с угрозой безопасности.

    Максимальная задержка выполнения

    Браузеры, включая Internet Explorer, Chrome, Safari и Firefox хранят значение тайм-аута как 32-разрядное целое число со знаком внутри. Значения выше 2147483647 миллисекунд (около 24,8 дней) вызовут переполнение, в результате чего вызов переданной функции произойдет немедленно.

    Причины увеличения задержек


    Давайте с Вами рассмотрим распространенные причины по которым тайм-аут может занять больше времени, чем ожидалось.

    В современных браузерах вызовы методов setTimeout() или setInterval() могут быть произведены как минимум один раз в 4 миллисекунды, когда последовательные вызовы инициируются из-за вложенности обратного вызова, или после определенного количества последовательных интервалов.

    Чтобы уменьшить нагрузку (и связанное с ней использование батареи) с фоновых вкладок, тайм-ауты регулируются до срабатывания не чаще одного раза в секунду (1000 миллисекунд) в неактивных вкладках.

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

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

    Причины увеличения задержек

    Давайте с Вами рассмотрим распространенные причины по которым тайм-аут может занять больше времени, чем ожидалось.

    В современных браузерах вызовы методов setTimeout() или setInterval() могут быть произведены как минимум один раз в 4 миллисекунды, когда последовательные вызовы инициируются из-за вложенности обратного вызова, или после определенного количества последовательных интервалов.

    Чтобы уменьшить нагрузку (и связанное с ней использование батареи) с фоновых вкладок, тайм-ауты регулируются до срабатывания не чаще одного раза в секунду (1000 миллисекунд) в неактивных вкладках.

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

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

    Длительность выполнения меньше интервала

    Если существует вероятность того, что выполнение логики может занять больше времени, чем интервал времени, то рекомендуется вместо использования метода setInterval() рекурсивно вызвать именованную функцию с помощью метода setTimeout(). Например, при использовании setInterval() для опроса удаленного сервера каждые 5 секунд задержка в сети, не отвечающий сервер и множество других проблем могут помешать выполнению запроса в отведенное время. Таким образом, вы можете оказаться в очереди с запросами XHR , которые не обязательно вернутся в необходимом порядке. В этих случаях предпочтителен рекурсивный вызов метода setTimeout():

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

    WindowTimers.setTimeout()

    На этой странице

    Краткое изложение

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

    Синтаксис

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

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

    Пример

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

    HTML Content

    JavaScript Content

    Аргументы функции обратного вызова

    If you need to pass an argument to your callback function, but need it to work in Internet Explorer 9 and below, which doesn’t support sending additional parameters (neither with setTimeout() or setInterval() ) you can include this IE-specific compatibility code which will enable the HTML5 standard parameters passage functionality in that browser for both timers just by inserting it at the beginning of your scripts.

    Правка только для 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:

    Or go for a very clean approach based on the IE HTML conditional feature:

    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.

    Explanation

    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:

    As you can see there are no ways to pass the this object to the callback function.

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

    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:

    New feature test:

    There are not native solutions ad hoc to this problem.

    Замечания

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

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

    Passing string literals

    Passing a string instead of a function to setTimeout() suffers from the same hazards as using 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.

    Minimum/ maximum delay and timeout nesting

    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.

    Inactive tabs

    In (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) and Chrome 11, timeouts are clamped to firing no more often than once per second (1000ms) in inactive tabs; see баг 633421 for more information about this in Mozilla or crbug.com/66078 for details about this in Chrome.

    Совместимость с браузерами

    Update compatibility data on GitHub

    Компьютеры Мобильные
    Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome для Android Firefox для Android Opera для Android Safari on iOS Samsung Internet
    setTimeout Chrome Полная поддержка 30 Edge Полная поддержка Да Firefox Полная поддержка 1
    Замечания setInterval now defined on WindowOrWorkerGlobalScope mixin.
    Opera Android Полная поддержка 10.1 Safari iOS Полная поддержка 1 Samsung Internet Android ?
    Supports parameters for callback Chrome Полная поддержка Да Edge Полная поддержка Да Firefox Полная поддержка Да IE Полная поддержка 10 Opera Полная поддержка Да Safari ? WebView Android Полная поддержка Да Chrome Android Полная поддержка Да Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
    Throttling of tracking timeout scripts Chrome ? Edge ? Firefox Полная поддержка 55 IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android Полная поддержка 55 Opera Android ? Safari iOS ? Samsung Internet Android ?

    Легенда

    Спецификация

    Part of DOM level 0, as specified in HTML5.

    Также интересно

    Metadata

    • Последнее изменение: Mar 20, 2020 , by MDN contributors
    1. WindowTimers

    Mozilla


    © 2005- 2020 Mozilla and individual contributors.

    Content is available under these licenses.

    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:

    \u041F\u0440\u043E\u0431\u043B\u0435\u043C\u0430 \u0441 \\\» this \\\»

    \u041A\u043E\u0433\u0434\u0430 \u0432\u044B \u043F\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0435 \u043C\u0435\u0442\u043E\u0434 \u0432 setTimeout() (\u0438\u043B\u0438 \u0432 \u043B\u044E\u0431\u0443\u044E \u0434\u0440\u0443\u0433\u0443\u044E \u0444\u0443\u043D\u043A\u0446\u0438\u044E, \u0435\u0441\u043B\u0438 \u043D\u0430 \u0442\u043E \u043F\u043E\u0448\u043B\u043E), \u0442\u043E \u0432\u044B\u0437\u043E\u0432 \u0431\u0443\u0434\u0435\u0442 \u043E\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043B\u0435\u043D \u0441 \u043D\u0435\u043F\u0440\u0430\u0432\u0438\u043B\u044C\u043D\u044B\u043C \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435\u043C this . \u042D\u0442\u0430 \u043F\u0440\u043E\u0431\u043B\u0435\u043C\u0430 \u0440\u0430\u0437\u044A\u044F\u0441\u043D\u044F\u0435\u0442\u0441\u044F \u0434\u0435\u0442\u0430\u043B\u044C\u043D\u043E \u0432 JavaScript reference.

    Explanation

    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:

    As you can see there are no ways to pass the this object to the callback function.

    \u0412\u043E\u0437\u043C\u043E\u0436\u043D\u043E\u0435 \u0440\u0435\u0448\u0435\u043D\u0438\u0435

    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:

    New feature test:

    There are not native solutions ad hoc to this problem.

    \u0417\u0430\u043C\u0435\u0447\u0430\u043D\u0438\u044F

    \u041E\u0442\u043B\u043E\u0436\u0435\u043D\u043D\u043E\u0435 \u0432\u044B\u043F\u043E\u043B\u043D\u0435\u043D\u0438\u0435 \u043A\u043E\u0434\u0430 \u043C\u043E\u0436\u043D\u043E \u043E\u0442\u043C\u0435\u043D\u0438\u0442\u044C, \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u044F\u00A0 window.clearTimeout() . \u0415\u0441\u043B\u0438 \u0444\u0443\u043D\u043A\u0446\u0438\u044F \u0434\u043E\u043B\u0436\u043D\u0430\u00A0\u0432\u044B\u0437\u044B\u0432\u0430\u0442\u044C\u0441\u044F \u043D\u0435\u043E\u0434\u043D\u043E\u043A\u0440\u0430\u0442\u043D\u043E\u00A0(\u043D\u0430\u043F\u0440\u0438\u043C\u0435\u0440, \u043A\u0430\u0436\u0434\u044B\u0435 N \u043C\u0438\u043B\u043B\u0438\u0441\u0435\u043A\u0443\u043D\u0434), \u043D\u0435\u043E\u0431\u0445\u043E\u0434\u0438\u043C\u043E \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C\u00A0 window.setInterval() .

    \u0412\u0430\u0436\u043D\u043E \u0437\u0430\u043C\u0435\u0442\u0438\u0442\u044C, \u0447\u0442\u043E \u0444\u0443\u043D\u043A\u0446\u0438\u044F \u0438\u043B\u0438 \u043A\u043E\u0434 \u043D\u0435 \u043C\u043E\u0433\u0443\u0442 \u0431\u044B\u0442\u044C \u0432\u044B\u043F\u043E\u043B\u043D\u0435\u043D\u044B, \u043F\u043E\u043A\u0430 \u043D\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u0442\u0441\u044F \u043F\u043E\u0442\u043E\u043A,\u00A0\u0432\u044B\u0437\u0432\u0430\u0432\u0448\u0438\u0439\u00A0 setTimeout() .

    Passing string literals

    Passing a string instead of a function to setTimeout() suffers from the same hazards as using 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.

    Minimum/ maximum delay and timeout nesting

    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.

    Inactive tabs

    In (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) and Chrome 11, timeouts are clamped to firing no more often than once per second (1000ms) in inactive tabs; see \u0431\u0430\u0433\u00A0633421 for more information about this in Mozilla or crbug.com/66078 for details about this in Chrome.

    \u0421\u043E\u0432\u043C\u0435\u0441\u0442\u0438\u043C\u043E\u0441\u0442\u044C \u0441 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043C\u0438

    Update compatibility data on GitHub

    \u041A\u043E\u043C\u043F\u044C\u044E\u0442\u0435\u0440\u044B \u041C\u043E\u0431\u0438\u043B\u044C\u043D\u044B\u0435
    Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome \u0434\u043B\u044F Android Firefox \u0434\u043B\u044F Android Opera \u0434\u043B\u044F Android Safari on iOS Samsung Internet
    setTimeout Chrome \\n \u041F\u043E\u043B\u043D\u0430\u044F \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u043A\u0430 \\n \\n 30 Edge \\n \u041F\u043E\u043B\u043D\u0430\u044F \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u043A\u0430 \\n \\n \u0414\u0430 Firefox \\n \u041F\u043E\u043B\u043D\u0430\u044F \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u043A\u0430 \\n \\n 1
    \u0417\u0430\u043C\u0435\u0447\u0430\u043D\u0438\u044F setInterval now defined on WindowOrWorkerGlobalScope mixin.
    Opera Android \\n \u041F\u043E\u043B\u043D\u0430\u044F \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u043A\u0430 \\n \\n 10.1 Safari iOS \\n \u041F\u043E\u043B\u043D\u0430\u044F \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u043A\u0430 \\n \\n 1 Samsung Internet Android \\n ?\\n
    Supports parameters for callback Chrome \\n \u041F\u043E\u043B\u043D\u0430\u044F \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u043A\u0430 \\n \\n \u0414\u0430 Edge \\n \u041F\u043E\u043B\u043D\u0430\u044F \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u043A\u0430 \\n \\n \u0414\u0430 Firefox \\n \u041F\u043E\u043B\u043D\u0430\u044F \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u043A\u0430 \\n \\n \u0414\u0430 IE \\n \u041F\u043E\u043B\u043D\u0430\u044F \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u043A\u0430 \\n \\n 10 Opera \\n \u041F\u043E\u043B\u043D\u0430\u044F \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u043A\u0430 \\n \\n \u0414\u0430 Safari \\n ?\\n WebView Android \\n \u041F\u043E\u043B\u043D\u0430\u044F \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u043A\u0430 \\n \\n \u0414\u0430 Chrome Android \\n \u041F\u043E\u043B\u043D\u0430\u044F \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u043A\u0430 \\n \\n \u0414\u0430 Firefox Android \\n ?\\n Opera Android \\n ?\\n Safari iOS \\n ?\\n Samsung Internet Android \\n ?\\n
    Throttling of tracking timeout scripts Chrome \\n ?\\n Edge \\n ?\\n Firefox \\n \u041F\u043E\u043B\u043D\u0430\u044F \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u043A\u0430 \\n \\n 55 IE \\n ?\\n Opera \\n ?\\n Safari \\n ?\\n WebView Android \\n ?\\n Chrome Android \\n ?\\n Firefox Android \\n \u041F\u043E\u043B\u043D\u0430\u044F \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u043A\u0430 \\n \\n 55 Opera Android \\n ?\\n Safari iOS \\n ?\\n Samsung Internet Android \\n ?\\n

    \u041B\u0435\u0433\u0435\u043D\u0434\u0430

    \u0421\u043F\u0435\u0446\u0438\u0444\u0438\u043A\u0430\u0446\u0438\u044F

    Part of DOM level 0, as specified in HTML5.

    \u0422\u0430\u043A\u0436\u0435 \u0438\u043D\u0442\u0435\u0440\u0435\u0441\u043D\u043E

    \u041A\u0440\u0430\u0442\u043A\u043E\u0435 \u0438\u0437\u043B\u043E\u0436\u0435\u043D\u0438\u0435

    \u0412\u044B\u0437\u043E\u0432 \u0444\u0443\u043D\u043A\u0446\u0438\u0438 \u0438\u043B\u0438 \u0432\u044B\u043F\u043E\u043B\u043D\u0435\u043D\u0438\u0435 \u0444\u0440\u0430\u0433\u043C\u0435\u043D\u0442\u0430 \u043A\u043E\u0434\u0430 \u043F\u043E\u0441\u043B\u0435 \u0443\u043A\u0430\u0437\u0430\u043D\u043D\u043E\u0439 \u0437\u0430\u0434\u0435\u0440\u0436\u043A\u0438.

    \u0421\u0438\u043D\u0442\u0430\u043A\u0441\u0438\u0441

    \\n\\n

      \\n
    • timeoutID — \u00A0\u044D\u0442\u043E\u00A0\u0447\u0438\u0441\u043B\u043E\u0432\u043E\u0439\u00A0ID, \u043A\u043E\u0442\u043E\u0440\u044B\u0439 \u043C\u043E\u0436\u0435\u0442 \u0431\u044B\u0442\u044C \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D \u043F\u043E\u0437\u0436\u0435 \u0441 <>. \\n
    • func — \u00A0\u044D\u0442\u043E \u0444\u0443\u043D\u043A\u0446\u0438\u044F, \u043A\u043E\u0442\u043E\u0440\u0443\u044E \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044F\u00A0\u0432\u044B\u0437\u0432\u0430\u0442\u044C \u043F\u043E\u0441\u043B\u0435 delay \u043C\u0438\u043B\u043B\u0438\u0441\u0435\u043A\u0443\u043D\u0434. \\n
    • code \u00A0- \u0432 \u0430\u043B\u044C\u0442\u0435\u0440\u043D\u0430\u0442\u0438\u0432\u043D\u043E\u043C \u0432\u0430\u0440\u0438\u0430\u043D\u0442\u0435 \u043F\u0440\u0438\u043C\u0435\u043D\u0435\u043D\u0438\u044F \u044D\u0442\u043E \u0441\u0442\u0440\u043E\u043A\u0430, \u0441\u043E\u0434\u0435\u0440\u0436\u0430\u0449\u0430\u044F \u043A\u043E\u0434, \u043A\u043E\u0442\u043E\u0440\u044B\u0439 \u0432\u044B \u0445\u043E\u0442\u0438\u0442\u0435 \u0432\u044B\u043F\u043E\u043B\u043D\u0438\u0442\u044C \u043F\u043E\u0441\u043B\u0435\u00A0 delay \u043C\u0438\u043B\u043B\u0438\u0441\u0435\u043A\u0443\u043D\u0434\u00A0(\u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C \u044D\u0442\u043E\u0442 \u043C\u0435\u0442\u043E\u0434\u00A0\u043D\u0435 \u0440\u0435\u043A\u043E\u043C\u0435\u043D\u0434\u0443\u0435\u0442\u0441\u044F\u00A0\u043F\u043E \u0442\u0435\u043C \u0436\u0435 \u043F\u0440\u0438\u0447\u0438\u043D\u0430\u043C, \u0447\u0442\u043E \u0438\u00A0eval()) \\n
    • delay \u00A0\u00A0<> — \u00A0\u0437\u0430\u0434\u0435\u0440\u0436\u043A\u0430 \u0432 \u043C\u0438\u043B\u043B\u0438\u0441\u0435\u043A\u0443\u043D\u0434\u0430\u0445\u00A0(\u0442\u044B\u0441\u044F\u0447\u043D\u044B\u0445 \u0434\u043E\u043B\u044F\u0445\u00A0\u0441\u0435\u043A\u0443\u043D\u0434\u044B), \u043F\u043E\u0441\u043B\u0435 \u043A\u043E\u0442\u043E\u0440\u043E\u0439\u00A0\u0431\u0443\u0434\u0435\u0442 \u0432\u044B\u043F\u043E\u043B\u043D\u0435\u043D \u0432\u044B\u0437\u043E\u0432 \u0444\u0443\u043D\u043A\u0446\u0438\u0438.\u00A0\u0420\u0435\u0430\u043B\u044C\u043D\u0430\u044F \u0437\u0430\u0434\u0435\u0440\u0436\u043A\u0430 \u043C\u043E\u0436\u0435\u0442 \u0431\u044B\u0442\u044C \u0431\u043E\u043B\u044C\u0448\u0435; \u0441\u043C. <> \u043D\u0438\u0436\u0435. \\n

    \\n\\n

    \u041D\u0435\u043E\u0431\u0445\u043E\u0434\u0438\u043C\u043E \u043F\u0440\u0438\u043D\u044F\u0442\u044C \u0432\u043E \u0432\u043D\u0438\u043C\u0430\u043D\u0438\u0435, \u0447\u0442\u043E \u043F\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u0434\u043E\u043F\u043E\u043B\u043D\u0438\u0442\u0435\u043B\u044C\u043D\u044B\u0445 \u043F\u0430\u0440\u0430\u043C\u0435\u0442\u0440\u043E\u0432 \u0444\u0443\u043D\u043A\u0446\u0438\u0438 \u0432 \u043F\u0435\u0440\u0432\u043E\u043C \u0432\u0430\u0440\u0438\u0430\u043D\u0442\u0435 \u043D\u0435 \u0440\u0430\u0431\u043E\u0442\u0430\u0435\u0442 \u0432\u00A0Internet Explorer 9 \u0438 \u043D\u0438\u0436\u0435. \u0414\u043B\u044F \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u0438\u044F\u00A0\u044D\u0442\u043E\u0433\u043E \u0444\u0443\u043D\u043A\u0446\u0438\u043E\u043D\u0430\u043B\u0430 \u0432 \u0442\u0430\u043A\u0438\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445, \u043D\u0435\u043E\u0431\u0445\u043E\u0434\u0438\u043C\u043E \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C \u043A\u043E\u0434 \u0434\u043B\u044F \u0441\u043E\u0432\u043C\u0435\u0441\u0442\u0438\u043C\u043E\u0441\u0442\u0438\u00A0(\u0441\u043C. \u0440\u0430\u0437\u0434\u0435\u043B\u00A0\u0410\u0440\u0433\u0443\u043C\u0435\u043D\u0442\u044B \u0444\u0443\u043D\u043A\u0446\u0438\u0438 \u043E\u0431\u0440\u0430\u0442\u043D\u043E\u0433\u043E \u0432\u044B\u0437\u043E\u0432\u0430).

    \u041F\u0440\u0438\u043C\u0435\u0440

    \u0412 \u0441\u043B\u0435\u0434\u0443\u044E\u0449\u0435\u043C \u043F\u0440\u0438\u043C\u0435\u0440\u0435 \u043D\u0430 \u0432\u0435\u0431 \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0435 \u0441\u043E\u0437\u0434\u0430\u044E\u0442\u0441\u044F \u0434\u0432\u0435 \u043F\u0440\u043E\u0441\u0442\u044B\u0435 \u043A\u043D\u043E\u043F\u043A\u0438, \u043A \u043A\u043E\u0442\u043E\u0440\u044B\u043C \u043F\u0440\u0438\u0432\u044F\u0437\u044B\u0432\u0430\u044E\u0442\u0441\u044F \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044F setTimeout \u0438 clearTimeout. \u041D\u0430\u0436\u0430\u0442\u0438\u0435 \u043D\u0430 \u043F\u0435\u0440\u0432\u0443\u044E \u043A\u043D\u043E\u043F\u043A\u0443 \u0443\u0441\u0442\u0430\u043D\u043E\u0432\u0438\u0442 \u0442\u0430\u0439\u043C\u0430\u0443\u0442, \u043A\u043E\u0442\u043E\u0440\u044B\u0439 \u0432\u044B\u0437\u043E\u0432\u0435\u0442 \u0434\u0438\u0430\u043B\u043E\u0433\u043E\u0432\u043E\u0435 \u043E\u043A\u043D\u043E \u0447\u0435\u0440\u0435\u0437 \u0434\u0432\u0435 \u0441\u0435\u043A\u0443\u043D\u0434\u044B. \u0422\u0430\u043A\u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u043E\u0445\u0440\u0430\u043D\u0435\u043D\u00A0id \u0434\u043B\u044F clearTimeout. \u0422\u0430\u0439\u043C\u0430\u0443\u0442 \u0442\u0430\u043A\u0436\u0435 \u043C\u043E\u0436\u0435\u0442 \u0431\u044B\u0442\u044C \u043E\u0442\u043C\u0435\u043D\u0435\u043D \u043F\u043E \u043D\u0430\u0436\u0430\u0442\u0438\u044E \u043D\u0430 \u0432\u0442\u043E\u0440\u0443\u044E \u043A\u043D\u043E\u043F\u043A\u0443.

    HTML Content

    JavaScript Content

    \u0410\u0440\u0433\u0443\u043C\u0435\u043D\u0442\u044B \u0444\u0443\u043D\u043A\u0446\u0438\u0438 \u043E\u0431\u0440\u0430\u0442\u043D\u043E\u0433\u043E \u0432\u044B\u0437\u043E\u0432\u0430

    If you need to pass an argument to your callback function, but need it to work in Internet Explorer 9 and below, which doesn’t support sending additional parameters (neither with setTimeout() or setInterval() ) you can include this IE-specific compatibility code which will enable the HTML5 standard parameters passage functionality in that browser for both timers just by inserting it at the beginning of your scripts.

    \u041F\u0440\u0430\u0432\u043A\u0430 \u0442\u043E\u043B\u044C\u043A\u043E \u0434\u043B\u044F 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:

    Or go for a very clean approach based on the IE HTML conditional feature:

    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:

    \u041F\u0440\u043E\u0431\u043B\u0435\u043C\u0430 \u0441 \\\» this \\\»

    \u041A\u043E\u0433\u0434\u0430 \u0432\u044B \u043F\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0435 \u043C\u0435\u0442\u043E\u0434 \u0432 setTimeout() (\u0438\u043B\u0438 \u0432 \u043B\u044E\u0431\u0443\u044E \u0434\u0440\u0443\u0433\u0443\u044E \u0444\u0443\u043D\u043A\u0446\u0438\u044E, \u0435\u0441\u043B\u0438 \u043D\u0430 \u0442\u043E \u043F\u043E\u0448\u043B\u043E), \u0442\u043E \u0432\u044B\u0437\u043E\u0432 \u0431\u0443\u0434\u0435\u0442 \u043E\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043B\u0435\u043D \u0441 \u043D\u0435\u043F\u0440\u0430\u0432\u0438\u043B\u044C\u043D\u044B\u043C \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435\u043C this . \u042D\u0442\u0430 \u043F\u0440\u043E\u0431\u043B\u0435\u043C\u0430 \u0440\u0430\u0437\u044A\u044F\u0441\u043D\u044F\u0435\u0442\u0441\u044F \u0434\u0435\u0442\u0430\u043B\u044C\u043D\u043E \u0432 JavaScript reference.

    Explanation

    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:

    As you can see there are no ways to pass the this object to the callback function.

    \u0412\u043E\u0437\u043C\u043E\u0436\u043D\u043E\u0435 \u0440\u0435\u0448\u0435\u043D\u0438\u0435

    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:

    New feature test:

    There are not native solutions ad hoc to this problem.

    \u0417\u0430\u043C\u0435\u0447\u0430\u043D\u0438\u044F

    \u041E\u0442\u043B\u043E\u0436\u0435\u043D\u043D\u043E\u0435 \u0432\u044B\u043F\u043E\u043B\u043D\u0435\u043D\u0438\u0435 \u043A\u043E\u0434\u0430 \u043C\u043E\u0436\u043D\u043E \u043E\u0442\u043C\u0435\u043D\u0438\u0442\u044C, \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u044F\u00A0 window.clearTimeout() . \u0415\u0441\u043B\u0438 \u0444\u0443\u043D\u043A\u0446\u0438\u044F \u0434\u043E\u043B\u0436\u043D\u0430\u00A0\u0432\u044B\u0437\u044B\u0432\u0430\u0442\u044C\u0441\u044F \u043D\u0435\u043E\u0434\u043D\u043E\u043A\u0440\u0430\u0442\u043D\u043E\u00A0(\u043D\u0430\u043F\u0440\u0438\u043C\u0435\u0440, \u043A\u0430\u0436\u0434\u044B\u0435 N \u043C\u0438\u043B\u043B\u0438\u0441\u0435\u043A\u0443\u043D\u0434), \u043D\u0435\u043E\u0431\u0445\u043E\u0434\u0438\u043C\u043E \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C\u00A0 window.setInterval() .

    \u0412\u0430\u0436\u043D\u043E \u0437\u0430\u043C\u0435\u0442\u0438\u0442\u044C, \u0447\u0442\u043E \u0444\u0443\u043D\u043A\u0446\u0438\u044F \u0438\u043B\u0438 \u043A\u043E\u0434 \u043D\u0435 \u043C\u043E\u0433\u0443\u0442 \u0431\u044B\u0442\u044C \u0432\u044B\u043F\u043E\u043B\u043D\u0435\u043D\u044B, \u043F\u043E\u043A\u0430 \u043D\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u0442\u0441\u044F \u043F\u043E\u0442\u043E\u043A,\u00A0\u0432\u044B\u0437\u0432\u0430\u0432\u0448\u0438\u0439\u00A0 setTimeout() .

    Passing string literals

    Passing a string instead of a function to setTimeout() suffers from the same hazards as using 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.

    Minimum/ maximum delay and timeout nesting

    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 << geckoRelease(\\\"5.0\\\") >>, 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 << domxref(\\\"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.

    Inactive tabs

    In << geckoRelease(\\\"5.0\\\") >> and Chrome 11, timeouts are clamped to firing no more often than once per second (1000ms) in inactive tabs; see << bug(633421) >> for more information about this in Mozilla or crbug.com/66078 for details about this in Chrome.

    \u0421\u043E\u0432\u043C\u0435\u0441\u0442\u0438\u043C\u043E\u0441\u0442\u044C \u0441 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043C\u0438

    \u0421\u043F\u0435\u0446\u0438\u0444\u0438\u043A\u0430\u0446\u0438\u044F

    Part of DOM level 0, as specified in HTML5.

    Метод setTimeout — Два и три параметра — Последовательность событий

    Количество просмотров : 727

    Метод setTimeout принимает два обязательных параметра и выполняет какой-либо код через заданный промежуток времени.

    1-ый параметр — это код.

    2-ой параметр — время в миллисекундах.

    setTimeout (код, 5000 );

    Здесь для метода setTimeout задан промежуток времени 5000 миллисекунд. То есть определенный код выполниться через 5 секунд.

    Метод setTimeout — 2 параметра

    /* 1. Здесь первым параметром метода setTimeout является код */

    Илон Маск рекомендует:  Шаблон сайта игры HTML, CSS, 1 страница
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL