settimeout js что возвращает

Форум

Discord чат

setTimeout

Синтаксис

Аргументы

Описание, примеры

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

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

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

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

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

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

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

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

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

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

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

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

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

См. также

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

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

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

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

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

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

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

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

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

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

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

Источник

setInterval setTimeout Javascript примеры, анимация и как остановить?

Жизненный цикл кода Javascript.

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

В javascript есть имитация параллельного выполнения кода. Весь код в Javascript выполняется синхронно, то есть интерпретатор js читает код как и мы читаем книгу слева на право, сверху вниз, символ за символом, строка за строкой.

Асинхронное интерпретирование кода это?

Асинхронность — это возможность выполнять два или более участка кода, параллельно с основным потоком, то есть не блокируя основной поток. Единственный способ эмулировать асинхронность, это использовать такие функции в javascript как setTimeout и setInterval. Но есть еще ajax, и у меня есть статья про него, но сейчас не об этом.

Сразу проясним что такое CallBack «колбэк» функция. CallBack функция — это функция, которая будет вызвана в будущем, когда произойдет какое-то событие, в случае с setTimeout и setInterval это тогда когда подойдет время таймера.

setTimeout что это?

setTimeout — это функция javascript, которая откладывает выполнения определенной части кода, на указанное время. Выполняется однократно.

setInterval что это?

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

Источник

Всё только о JavaScript

setTimeout и setInterval

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

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

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

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

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

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

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

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

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

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

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

Источник

О том, как работают JavaScript таймеры

На этом рисунке довольно много информации, которую нужно усвоить, но понимание этого даст вам более глубокое понимание механизма работы асинхронности выполнения JavaScript. на этой диаграмме вертикально представлено время в миллисекундах, синие блоки показывают блоки JavaScript кода, который был выполнен. Например, первый блок выполняется в среднем за 18мс, клик мышью блокирует выполнение примерно на 11мс и т.д.

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

Для начала представим, что внутри JavaScript блока стартуют два таймера: setTimeout с задержкой 10мс и setInterval с такой же задержкой. В зависимости от того, когда стартует таймер, он сработает в момент, когда мы еще не завершили первый блок кода. Заметьте, однако, что он не срабатывает сразу (это невозможно из-за однопоточности). Вместо этого отложенная функция попадает в очередь и исполняется в следующий доступный момент.

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

После того, как первый блок JavaScript кода был выполнен, браузер задается вопросом «Что ожидает исполнения?». В данном случае обработчик клика мышью и таймер находятся в состоянии ожидания. Браузер выбирает один из них (обработчик клика) и выполняет его. Таймер будет ожидать следующей доступной порции времени в очереди на исполнение.

Заметьте, что пока обработчик клика мышью выполняется, срабатывает первый interval-callback. Так же как и timer-callback, он будет поставлен в очередь. Тем не менее, учтите, что когда снова сработает interval (пока будет выполняться timer-callback), то он будет удален из очереди. Если бы все interval-callback’и попадали в очередь пока исполняется большой кусок кода, это бы привело к тому, что образовалась бы куча функций, ожидающих вызова без периодов задержек между окончанием их выполнения. Вместо этого браузеры стремятся ждать пока не останется ни одной функции в очереди прежде чем добавить в очередь еще одну.

Таким образом, мы можем наблюдать случай, когда третье срабатывание interval-callback совпадает с тем моментом, когда он уже исполняется. Это иллюстрирует важную особенность: интервалы не заботятся о том, что выполняется в текущий момент, они будут добавлены в очередь без учета периода задержки между исполнениями.

Наконец, после того как второй interval-callback завершится, мы увидим что не осталось ничего, что JavaScript-движок должен выполнить. Это значит, что браузер снова ждет появления новых асинхронных событий. Это случится на отметке 50мс, где interval-callback сработает опять. В этот момент не будет ничего, что блокировало бы его, поэтому он сработает незамедлительно.

Давайте рассмотрим пример, который хорошо иллюстрирует разницу между setTimeout и setInterval.

Эти два варианта эквивалентны на первый взгляд, но на самом деле это не так. Код, использующий setTimeout будет всегда иметь задержку хотя бы 10мс после предыдущего вызова (он может быть больше, но никогда не может быть меньше), тогда как код, использующий setInterval будет стремиться вызываться каждые 10мс независимо от того, когда отработал предыущий вызов.

Давайте резюмируем все сказанное выше:
— JavaScript движки используют однопоточную среду, преобразовывая асинхронные события в очередь, ожидающую исполнения,
— Функции setTimeout и setInterval принципиально по-разному исполняются в асинхронном коде,
— Если таймер не может быть выполнен в данный момент, он будет отложен до следующей точки исполнения (которая будет дольше, чем желаемая задержка),
— Интервалы (setInterval) могут исполняться друг за другом без задержек, если их исполнение занимает больше времени, чем указанная задержка.

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

Источник

JavaScript метод WindowOrWorkerGlobalScope.setTimeout()

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

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

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

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

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

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

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

JavaScript синтаксис:

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

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

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

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

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

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

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

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

Проблема с this

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник