Как сделать паузу при выполнении скрипта в JavaScript
Вы можете просто использовать метод setTimeout() , чтобы сделать паузу, прежде чем продолжить выполнение кода в JavaScript. Время задержки выполнения скрипта указывается в миллисекундах (тысячных долях секунды).
Давайте посмотрим следующий пример, чтобы понять, как это работает:
Как вы заметили в предыдущем примере, JS-код после метода setTimeout() продолжает выполнение. Однако, если вам нужен настоящий «сон», когда все дальнейшее выполнение кода JavaScript должно прекратиться, вы можете использовать конструктор Promise . Давайте посмотрим пример, как это работает:
Оператор await используется для ожидания. Его можно использовать только внутри функции async .
Читайте также
Похожие примеры:
🎅MnogoBlog
⛄как создать сайт на wordpress, настроить и оптимизировать wordpress
Функция задержки, паузы в JavaScript (Delay, Sleep, Pause, & Wait)
🎅MnogoBlog > Уроки по JavaScript > Функция задержки, паузы в JavaScript (Delay, Sleep, Pause, & Wait)
Многие языки программирования имеют функцию sleep, которая задержит выполнение программы на заданное количество секунд. Эта функциональность отсутствует в JavaScript, в силу его асинхронной природы. В этой статье мы кратко рассмотрим, как мы можем реализовать функцию sleep в JavaScript.
Скачать исходники для статьи можно ниже
Стандартный способ создания задержки в JavaScript заключается в использовании его метода setTimeout:
console.log("Hello"); setTimeout(() => < console.log("World!"); >, 2000); Результатом данного кода будет вывод слова “Hello”, а затем через две секунды слова “World!” И во многих случаях этого достаточно: делай что-то, жди, потом делай что-то еще.
Однако имейте в виду, что setTimeout – это асинхронный метод. Попробуйте изменить предыдущий код вот так:
console.log("Hello"); setTimeout(() => < console.log("World!"); >, 2000); console.log("Goodbye!"); Результат будет следующий:
Также можно использовать метод setTimeout (или его двоюродного брата setInterval), чтобы заставить JavaScript ждать, пока не будет выполнено условие. Например, вот как можно использовать setTimeout ожидание появления определенного элемента на веб-странице:
function pollDOM () < const el = document.querySelector('my-element'); if (el.length) < // Do something with el >else < setTimeout(pollDOM, 300); // try again in 300 milliseconds >> pollDOM(); Это предполагает, что элемент появится в какой-то определенный момент времени. Если вы не уверены, что это произойдет, вам нужно будет изучить отмену таймера (с помощью методов clearTimeoutor, clearInterval).
Управление потоком в современном JavaScript:
Часто бывает так, что при написании JavaScript нам нужно подождать, пока что-то произойдет (например, данные будут извлечены из API), а затем сделать что-то в ответ (например, обновить пользовательский интерфейс для отображения данных).
К счастью, язык JavaScript значительно эволюционировал за последние несколько лет и теперь предлагает нам новые конструкции, например, с помощью async await мы можем заставить JavaScript выполнять код сверху вниз:
Здесь интерпретатор JavaScript ожидает завершения сетевого запроса, и сначала регистрируется количество публичных репозиций, а затем выводит сообщение “Hello!”.
С помощью цикла заставляем JavaScript ждать!
function sleep(milliseconds) < const date = Date.now(); let currentDate = null; do < currentDate = Date.now(); >while (currentDate - date < milliseconds); >console.log("Hello"); sleep(2000); console.log("World!"); Как и ожидалось, сначала будет выведено сообщение “Hello”, затем пауза в течение двух секунд, а после сообщение “World!”.
Вышеуказанный код использует метод Date.now для получения количества миллисекунд, прошедших с 1 января 1970 года и присваивает это значение переменной date. Затем он создает пустую currentDate переменную, прежде чем войти в do … while цикл. В цикле он повторно получает количество миллисекунд, прошедших с 1 января 1970 года, и присваивает значение ранее объявленной currentDate переменной. Цикл будет продолжать до тех пор, пока разница между date и currentDate меньше, чем требуемая задержка в миллисекундах.
Самый лучший способ создать задержку в JavaScript:
Предыдущий способ имеет большой недостаток: цикл блокирует поток выполнения JavaScript и гарантирует, что никто не сможет взаимодействовать с вашей программой до ее завершения. Если вам нужна большая задержка, есть шанс, что он даже может всё сломать.
Ну, так можно объединить методы, изученные ранее в этой статье, чтобы сделать менее навязчивую функцию сна:
function sleep(ms) < return new Promise(resolve =>setTimeout(resolve, ms)); > console.log("Hello"); sleep(2000).then(() => < console.log("World!"); >); Этот код будет выводить “Hello”, далее ждать две секунды, а затем выводить “World!” – здесь мы использовали метод setTimeout.
Обратите внимание, что в данном коде мы использовали – then – обратный вызов, чтобы убедиться, что второе сообщение регистрируется с задержкой. Мы также можем подключить больше обратных вызовов к первому сообщению:
console.log("Hello"); sleep(2000) .then(() => < console.log("World!"); >) .then(() => < sleep(2000) .then(() =>< console.log("Goodbye!"); >) >); Этот код работает, но выглядит некрасиво, но если мы воспользуемся конструкцией async … await, то код станет намного лучше:
function sleep(ms) < return new Promise(resolve =>setTimeout(resolve, ms)); > async function delayedGreeting() < console.log("Hello"); await sleep(2000); console.log("World!"); await sleep(2000); console.log("Goodbye!"); >delayedGreeting(); Конечно, оба последних способа имеют свои недостатки (или особенности), например, в последнем способе, если записать код так:
function sleep(ms) < return new Promise(resolve =>setTimeout(resolve, ms)); > async function delayedGreeting() < console.log("Hello"); await sleep(2000); console.log("World!"); >delayedGreeting(); console.log("Goodbye!"); Результат будет следующий:
То есть в данном способе спит только функция.
PS: Вот, например, можно создать вот такой код, который записываем в файл functions.php темы wordpress:
add_action( 'wp_head', function () < ?>1 1 1 setTimeout(resolve, ms) ); > async function delayedGreeting() < document.getElementById("hello").innerHTML = "С Новым Годом!"; await sleep(2000); document.getElementById("hello").innerHTML = "С 2020 годом!"; await sleep(2000); document.getElementById("hello").innerHTML = "![](\"https://mnogoblog.ru/wp-content/uploads/2014/12/newyeargif.png\")
"; > delayedGreeting(); ); Код будет выводить сверху сайта поздравление “С Новым Годом!”, далее через 2 секунды поздравление “С 2020 годом!”, а ещё через 2 секунды покажет картинку на новогоднюю тему!
Например, чтобы по истечению
Добавить комментарий Отменить ответ
Для отправки комментария вам необходимо авторизоваться.
Функция js setTimout и sleep в JavaScript
Во многих языках программирования есть функция sleep , которая может задерживать выполнение программы на несколько секунд. Но в JavaScript такая функция отсутствует из-за его асинхронного характера. В этой статье мы рассмотрим как реализовать js sleep самостоятельно.
setTimout и sleep в JavaScript
Для того, чтобы лучше понять проблему, посмотрите следующий код. Он делает запрос к API GitHub для получения пользовательских данных, затем выводит количество публичных репозиториев и, наконец, пошлет в консоль «Привет!»
JS fetch('https://api.github.com/users/username') .then(res => res.json()) .then(json => console.log(json.public_repos)); console.log("Привет!"); Но если запустить такой код, то сначала он выведет на экран «Привет!», а уже потом количество публичных репозиториев.
Так происходит, потому что получение данных от API — это асинхронная операция в JavaScript. Интерпритатор JavaScript встретит команду fetch и отправит запрос. Он не будет ждать завершения запроса и выведет «Привет!» в консоль, и потом через пару сотен миллисекунд выдаст количество рекозиториев.
Создаем простую задержку с помощью js setTimeout
Теперь, давайте рассмотрим создание задержки в JavaScript, используя метод setTimeout .
JS console.log("Привет"); setTimeout(() => < console.log("мир"); >, 3000); Этот код запишет в консоль «Привет», а затем через 3 секунды «мир» ‐ во многих случаях такой задержки достаточно. Но имейте ввиду, что в js setTimeout ‐ это асинхронный метод. Попробуйте изменить предыдущий код следующим образом:
JS console.log("Привет"); setTimeout(() => < console.log("мир"); >, 3000); console.log("Пока"); Этот код выведет: Привет Пока мир.
Вы также можете использовать setTimeout (или его брата setInterval ), чтобы заставить JavaScript подождать пока не будет выполнено какое-либо условие. К примеру, вам нужно дождаться появления определенного элемента на странице:
JS function waitForDOM () < const container = document.querySelector('container'); if (container.length) < // Делаем что-то с контейнером >else < setTimeout(waitForDOM, 300); // Попробовать снова через 300 миллисекунд >> waitForDOM(); Управление потоком в современном JavaScript
В JavaScript часто бывают ситуации, когда вам нужно подождать, пока то-то произойдет, а затем сделать что-то в ответ. В примере выше мы использовали анонимную callback функцию. Но что если вам нужно подождать несколько событий? В этом случае синтаксис быстро становится довольно грубым.
К счастью, язык значительно изменился за последние несколько лет и теперь у нас есть новые конструкции для этих целей. К примеру, мы может переписать код для получения информации из API GitHub, используя async await .
Теперь код выполняется сверху вниз.
Sleep в JavaScript
Мы уже готовы остановить поток выполнения программы и заставить JavaScript спать. Вот как мы можем это сделать:
JS function sleep(milliseconds) < const date = Date.now(); let currentDate = null; do < currentDate = Date.now(); >while (currentDate - date < milliseconds); >console.log("Привет"); sleep(2000); console.log("мир"); В результате сначала в консоли отобразится «Привет», пауза на две секунды, а затем «мир». Функция работает с помощью метода Date.now , получает количество миллисекунд, прошедших с 1 января 1970 года, и присваивает это значение переменной date . Запускает цикл, который будет продолжаться, пока разница между date и currentDate будет меньше нужной задержки.
Улучшаем функцию js sleep
Функция делает то, что нам нужно, но у нее есть недостаток: если вам нужна большая задержка, то она может привести к поломке программы. Объединим методы изученные ранее в статье, чтобы сделать менее навязчивую функцию сна.
JS function sleep(ms) < return new Promise(resolve =>setTimeout(resolve, ms)); > console.log("Привет"); sleep(2000).then(() => < console.log("мир"); >); Этот код выведет в консоль «Привет», подождет 2 секунды, затем выведет «мир». Внутри мы используем Promise.
Сделаем JavaScript функцию sleep с помощью async . await:
JS function sleep(ms) < return new Promise(resolve =>setTimeout(resolve, ms)); > async function delayedGreeting() < console.log("Привет"); await sleep(2000); console.log("мир"); >delayedGreeting(); console.log("Пока");