Как сделать задержку выполнения скрипта
Функция js setTimout и sleep в JavaScript
setTimout и sleep в JavaScript
Для того, чтобы лучше понять проблему, посмотрите следующий код. Он делает запрос к API GitHub для получения пользовательских данных, затем выводит количество публичных репозиториев и, наконец, пошлет в консоль «Привет!»
Но если запустить такой код, то сначала он выведет на экран «Привет!», а уже потом количество публичных репозиториев.
Так происходит, потому что получение данных от API — это асинхронная операция в JavaScript. Интерпритатор JavaScript встретит команду fetch и отправит запрос. Он не будет ждать завершения запроса и выведет «Привет!» в консоль, и потом через пару сотен миллисекунд выдаст количество рекозиториев.
Создаем простую задержку с помощью js setTimeout
Этот код запишет в консоль «Привет», а затем через 3 секунды «мир» ‐ во многих случаях такой задержки достаточно. Но имейте ввиду, что в js setTimeout ‐ это асинхронный метод. Попробуйте изменить предыдущий код следующим образом:
Этот код выведет: Привет Пока мир.
Вы также можете использовать setTimeout (или его брата setInterval ), чтобы заставить JavaScript подождать пока не будет выполнено какое-либо условие. К примеру, вам нужно дождаться появления определенного элемента на странице:
Управление потоком в современном JavaScript
В JavaScript часто бывают ситуации, когда вам нужно подождать, пока то-то произойдет, а затем сделать что-то в ответ. В примере выше мы использовали анонимную callback функцию. Но что если вам нужно подождать несколько событий? В этом случае синтаксис быстро становится довольно грубым.
Теперь код выполняется сверху вниз.
Sleep в JavaScript
Мы уже готовы остановить поток выполнения программы и заставить JavaScript спать. Вот как мы можем это сделать:
Улучшаем функцию js sleep
Функция делает то, что нам нужно, но у нее есть недостаток: если вам нужна большая задержка, то она может привести к поломке программы. Объединим методы изученные ранее в статье, чтобы сделать менее навязчивую функцию сна.
Этот код выведет в консоль «Привет», подождет 2 секунды, затем выведет «мир». Внутри мы используем Promise.
Как добавить задержку в цикл JavaScript?
Я хотел бы добавить задержку/сон внутри while петли:
то, что я хотел бы, это после alert(‘hello’) отображается через 3 секунды после alert(‘hi’) тогда ему нужно подождать 3 секунды во второй раз alert(‘hello’) и так далее.
22 ответов
на setTimeout() функция не-преграждает и возвратит немедленно. Поэтому ваш цикл будет перебирать очень быстро и начнет 3-секундный тайм-аут срабатывает один за другим в быстрой последовательности. Вот почему ваши первые оповещения появляются через 3 секунды, а все остальные следуют последовательно без каких-либо задержек.
вы можете использовать что-то вроде этого:
вы также можете привести его в порядок, используя функцию самостоятельного вызова, передача числа итераций в качестве аргумента:
попробуйте что-то вроде этого:
если вы используете ES6, вы можете использовать let достижения:
другой способ-умножить время до таймаута, но обратите внимание, что это не люблю спать. Код после того, как цикл будет выполнен немедленно, только выполнение функции обратного вызова откладывается.
Я думаю, тебе нужно что-то вроде этого:
Примечание: использование предупреждений останавливает выполнение javascript до закрытия предупреждения. Это может быть больше кода, чем вы просили, но это надежное многоразовое решение.
Это будет работать
Так как ES7 есть лучший способ ждут петли:
обратите внимание, что ES7 редко поддерживается сегодня, поэтому вам нужно транспилировать с Babel, чтобы использовать его везде.
в ES6 (ECMAScript 2015) Вы можете выполнять итерацию с задержкой с помощью генератор и интервал.
генераторы, новая функция ECMAScript 6, являются функциями, которые могут быть сделал паузу и продолжил: Вызов genFunc не выполняет его. Вместо этого возвращает так называемый объект generator, который позволяет нам управлять genFunc исполнение. genFunc () первоначально приостанавливается в начале тело. В genObj способ.next () продолжает выполнение genFunc, пока следующий выход. (исследуя ES6)
пример кода:
поэтому, если вы используете ES6, это самый элегантный способ достичь цикла с задержкой (на мой взгляд).
Я делаю это с сине Promise.delay и рекурсии.
просто подумал, что я отправлю свои два цента здесь. Эта функция выполняет итеративный цикл с задержкой. См.этот jsfiddle. Функция выглядит следующим образом:
было бы эквивалентно:
Вы можете использовать RxJS интервал оператор. Интервал испускает целое число через каждые x секунд, и take Is указывает количество раз, когда он должен испускать числа
модифицированная версия ответа Даниэля Вассалло, с переменными, извлеченными в параметры, чтобы сделать функцию более многоразовой:
сначала определим некоторые существенные переменные:
Далее вы должны определить функцию, которую вы хотите запустить. Это будет передано i, текущий индекс цикла и длина цикла, Если вам это нужно:
самоисполнимости версия
функциональная версия
вот как я создал бесконечный цикл с задержкой, которая прерывается при определенном условии:
ключ здесь состоит в том, чтобы создать новое обещание, которое разрешается таймаутом, и ждать его разрешения.
очевидно, вам нужна поддержка async/await для этого. Работает в узле 8.
для общего использования » забудьте обычные циклы «и используйте эту комбинацию» setInterval «включает»setTimeOut»: вот так (из моих реальных задач).
PS: поймите, что реальное поведение (setTimeOut): все они начнут в то же время «три бла бла бла начнут отсчет в тот же момент», поэтому сделайте другой тайм-аут, чтобы организовать выполнение.
MnogoBlog
как создать сайт на wordpress, настроить и оптимизировать wordpress
Функция задержки, паузы в JavaScript (Delay, Sleep, Pause, & Wait)
Многие языки программирования имеют функцию sleep, которая задержит выполнение программы на заданное количество секунд. Эта функциональность отсутствует в JavaScript, в силу его асинхронной природы. В этой статье мы кратко рассмотрим, как мы можем реализовать функцию sleep в JavaScript.
Скачать исходники для статьи можно ниже
Стандартный способ создания задержки в JavaScript заключается в использовании его метода setTimeout:
Результатом данного кода будет вывод слова “Hello”, а затем через две секунды слова “World!” И во многих случаях этого достаточно: делай что-то, жди, потом делай что-то еще.
Однако имейте в виду, что setTimeout – это асинхронный метод. Попробуйте изменить предыдущий код вот так:
Результат будет следующий:
Hello
Goodbye!
World!
Также можно использовать метод setTimeout (или его двоюродного брата setInterval), чтобы заставить JavaScript ждать, пока не будет выполнено условие. Например, вот как можно использовать setTimeout ожидание появления определенного элемента на веб-странице:
Это предполагает, что элемент появится в какой-то определенный момент времени. Если вы не уверены, что это произойдет, вам нужно будет изучить отмену таймера (с помощью методов clearTimeoutor, clearInterval).
Управление потоком в современном JavaScript:
Часто бывает так, что при написании JavaScript нам нужно подождать, пока что-то произойдет (например, данные будут извлечены из API), а затем сделать что-то в ответ (например, обновить пользовательский интерфейс для отображения данных).
К счастью, язык JavaScript значительно эволюционировал за последние несколько лет и теперь предлагает нам новые конструкции, например, с помощью async await мы можем заставить JavaScript выполнять код сверху вниз:
Здесь интерпретатор JavaScript ожидает завершения сетевого запроса, и сначала регистрируется количество публичных репозиций, а затем выводит сообщение “Hello!”.
С помощью цикла заставляем JavaScript ждать!
Рассмотрим следующий код:
Как и ожидалось, сначала будет выведено сообщение “Hello”, затем пауза в течение двух секунд, а после сообщение “World!”.
Вышеуказанный код использует метод Date.now для получения количества миллисекунд, прошедших с 1 января 1970 года и присваивает это значение переменной date. Затем он создает пустую currentDate переменную, прежде чем войти в do … while цикл. В цикле он повторно получает количество миллисекунд, прошедших с 1 января 1970 года, и присваивает значение ранее объявленной currentDate переменной. Цикл будет продолжать до тех пор, пока разница между date и currentDate меньше, чем требуемая задержка в миллисекундах.
Самый лучший способ создать задержку в JavaScript:
Предыдущий способ имеет большой недостаток: цикл блокирует поток выполнения JavaScript и гарантирует, что никто не сможет взаимодействовать с вашей программой до ее завершения. Если вам нужна большая задержка, есть шанс, что он даже может всё сломать.
Ну, так можно объединить методы, изученные ранее в этой статье, чтобы сделать менее навязчивую функцию сна:
Этот код будет выводить “Hello”, далее ждать две секунды, а затем выводить “World!” – здесь мы использовали метод setTimeout.
Обратите внимание, что в данном коде мы использовали – then – обратный вызов, чтобы убедиться, что второе сообщение регистрируется с задержкой. Мы также можем подключить больше обратных вызовов к первому сообщению:
Этот код работает, но выглядит некрасиво, но если мы воспользуемся конструкцией async … await, то код станет намного лучше:
Конечно, оба последних способа имеют свои недостатки (или особенности), например, в последнем способе, если записать код так:
Результат будет следующий:
Hello
Goodbye!
World!
То есть в данном способе спит только функция.
PS: Вот, например, можно создать вот такой код, который записываем в файл functions.php темы wordpress:
Код будет выводить сверху сайта поздравление “С Новым Годом!”, далее через 2 секунды поздравление “С 2020 годом!”, а ещё через 2 секунды покажет картинку на новогоднюю тему!
Как установить временную задержку в javascript
У меня есть этот кусок js на моем веб-сайте для переключения изображений, но нужна задержка, когда вы нажимаете изображение во второй раз. Задержка должна быть 1000ms. Таким образом, Вы нажмете img.потом в JPG в img_onclick.jpg-файла появятся. Затем вам нужно будет щелкнуть на img_onclick.jpg изображение должно быть задержкой 1000 мс перед img.jpg отображается снова.
7 ответов
использовать setTimeout() :
Если вы хотите сделать это без setTimeout : см.этот вопрос.
поместите свой код внутри
есть два (в основном используемых) типа функции таймера в javascript setTimeout и setInterval (другое)
оба этих метода имеют одинаковую подпись. Они принимают функцию обратного вызова и время задержки в качестве параметра.
setTimeout выполняется только один раз после задержки, тогда как setInterval продолжает вызывать функцию обратного вызова после каждой задержки milisecs.
оба этих метода возвращают целочисленный идентификатор, который можно использовать для их очистки перед таймер истекает.
clearTimeout и clearInterval оба этих метода принимают целочисленный идентификатор, возвращаемый из вышеуказанных функций setTimeout и setInterval
пример:
если вы запустите приведенный выше код, вы увидите, что он предупреждает before setTimeout а то after setTimeout наконец он предупреждает I am setTimeout после 1сек (1000 мс)
что вы можете заметить из примера, так это то, что setTimeout(. ) является асинхронным, что означает, что он не ждет истечения таймера, прежде чем перейти к следующему оператору i.e alert(«after setTimeout»);
пример:
если вы запустите приведенный выше код, вы увидите, что он предупреждает before setInterval а то after setInterval наконец он предупреждает I am setInterval 5 раз после 1сек (1000 мс), потому что setTimeout очистить таймер через 5 секунд или же каждые 1 секунду вы получите предупреждение I am setInterval бесконечно.
как браузер внутренне это делает?
чтобы понять, что вы должны знать о очереди событий в javascript. В браузере реализована очередь событий. Всякий раз, когда событие запускается в js, все это события (например, нажмите и т. д.. ) добавляются в эту очередь. Когда вашему браузеру нечего выполнять, он берет событие из очереди и выполняет их один за другим.
теперь, когда вы называете setTimeout или setInterval ваш обратный вызов регистрируется таймером в браузере, и он добавляется в очередь событий после истечения заданного времени, и в конечном итоге javascript берет событие из очереди и выполняет его.
это происходит так, потому что движок javascript однопоточен, и они может выполнять только одну вещь за раз. Таким образом, они не могут выполнять другие javascript и отслеживать ваш таймер. Именно поэтому эти таймеры регистрируются в браузере (браузер не однопоточный), и он может отслеживать таймер и добавлять событие в очередь после истечения таймера.
же к setInterval только в этом случае событие добавляется в очередь снова и снова после указанного интервала, пока оно не будет очищено или страница браузера не будет обновлена.
параметр задержки, который вы передаете этим функциям, является минимальной задержкой время для выполнения обратного вызова. Это потому, что после истечения таймера браузер добавляет событие в очередь, которая будет выполняться javascript engine, но выполнение обратного вызова зависит от вашего положение событий в очереди и как движок однопоточный выполнит все события в очереди одно за другим.
отсюда, ваш обратный вызов может иногда занять больше указанного времени задержки, чтобы быть вызванным специально, когда ваш другой код блокирует поток и не дает ему времени для обработки того, что есть в очереди.
и как я уже упоминал JavaScript-это один поток. Итак, если вы блокируете нить надолго.
пользователь может получить сообщение о том,страница не отвечает.
Выполнить скрипт после определенной задержки с помощью JavaScript
Существует ли какой-либо метод JavaScript, подобный jQuery delay() или wait() (для задержки выполнения скрипта на определенное количество времени)?
15 ответов
вот моя проблема: мне нужно некоторое время отображать сообщение, а затем перезагрузить страницу. может ли кто-нибудь сказать мне, как перезагрузить страницу после определенной задержки?
Просто чтобы добавить к тому, что все остальные говорили о setTimeout : Если вы хотите вызвать функцию с параметром в будущем, вам нужно настроить несколько анонимных вызовов функций.
Вам нужно передать функцию в качестве аргумента, чтобы она была вызвана позже. Фактически это означает, что за именем нет скобок. Следующее вызовет предупреждение сразу же, и оно отобразит ‘Hello world’:
Чтобы исправить это, вы можете либо ввести имя функции (как это сделал Флубба), либо использовать анонимную функцию. Если вам нужно передать параметр, то вы должны использовать анонимную функцию.
Но если вы запустите этот код, то заметите, что через 2 секунды всплывающее окно скажет «Hello Stack Overflow». Это происходит потому, что значение переменной а изменилось за эти две секунды. Чтобы заставить его произнести ‘Hello world’ через две секунды, вам нужно использовать следующий фрагмент кода:
Он подождет 2 секунды,а затем всплывет ‘Hello world’.
функция, по которой может быть передано время, по истечении которого функция будет выполнена.
Если вы действительно хотите иметь блокирующую (синхронную) функцию delay (для чего бы то ни было), почему бы не сделать что-то вроде этого:
Вам нужно использовать setTimeout и передать ему функцию обратного вызова. Причина, по которой вы не можете использовать sleep в javascript, заключается в том, что вы заблокируете всю страницу от чего-либо в то же время. Не очень хороший план. Используйте модель событий Javascript и оставайтесь счастливыми. Не сопротивляйся!
Вы также можете использовать window.setInterval() для повторного запуска некоторого кода с регулярным интервалом.
Чтобы добавить к предыдущим замечаниям, я хотел бы сказать следующее :
Функция setTimeout() в JavaScript не приостанавливает выполнение скрипта как такового, а просто говорит компилятору выполнить код когда-нибудь в будущем.
В JavaScript нет функции, которая действительно может приостановить выполнение. Однако вы можете написать свою собственную функцию, которая делает что-то вроде безусловного цикла до тех пор, пока не будет достигнуто время, используя функцию Date() и добавляя нужный вам интервал времени.
Если вам нужно только проверить задержку вы можете использовать это:
И тогда если вы хотите задержаться на 2 секунды вы это сделаете:
Хотя, возможно, это не самое лучшее решение для производства. Подробнее об этом в комментариях
почему вы не можете поставить код за обещание? (набрано у меня на макушке)
Простой ответ таков:
Приведенная выше функция ждет 1 секунду (1000 мс), а затем устанавливает x в 1. Очевидно, что это пример; вы можете делать все, что хотите, внутри анонимной функции.
В моем коде я хочу автоматически перейти на предыдущую страницу после завершения события AJAX save. Завершение события сохранения имеет небольшую анимацию в CSS, указывающую на то, что сохранение было успешным.
В своем коде я нашел разницу между первыми двумя примерами:
Этот не ждет тайм-аута-back() вызывается почти сразу, независимо от того, какой номер я ввел для задержки.
Однако, изменив это на:
Это делает именно то, на что я надеялся.
Таким образом, я бы рекомендовал второй или третий метод, который он описывает, даже если вы используете встроенные функции и не используете аргументы.
У меня было несколько команд ajax, которые я хотел запустить с задержкой между ними. Вот простой пример одного из способов сделать это. Хотя я готов быть разорванным в клочья за мой нетрадиционный подход. 🙂
Вы можете скопировать блок кода и вставить его в окно консоли и увидеть что-то вроде:
Самое простое решение для вызова вашей функции с задержкой-это:
использование внутри функции async :
Похожие вопросы:
Я хотел бы создать JavaScript, который нажимает на определенный LINK после определенной задержки, скажем, 10 секунд на странице HTML. Не могли бы вы предоставить мне JavaScript, пожалуйста? То, что.
Я хочу изменить только содержимое тега
, используя javascript после определенной временной задержки. Например а
должно изменяться в зависимости от количества.
просто хотел узнать, можно ли программно остановить выполнение скрипта так же, как это делает функция javascript confirm. confirm останавливает дальнейшее выполнение скрипта до тех пор, пока.
вот моя проблема: мне нужно некоторое время отображать сообщение, а затем перезагрузить страницу. может ли кто-нибудь сказать мне, как перезагрузить страницу после определенной задержки?
Как можно организовать, чтобы выполнение скрипта останавливалось на notice/warning, без изменения другого поведения, включая уведомления/предупреждающие сообщения, то есть, например, не вызывая.
У меня есть скрипт, который я хочу разрешить пользователям отлаживать прямо в браузере. Я могу получить номера строк для точек останова и получить значения локальных переменных. Я попробовал.