Ожидание JavaScript: как заставить функцию ждать в JavaScript

JavaScript не предоставляет никаких собственных функций, таких как wait (). Что касается временных событий JavaScript, есть следующие функции, которые вы можете использовать в своем проекте.

  1. setTimeout ()
  2. clearInterval ()
  3. setInterval()

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

Понимание JavaScript setTimeout ()

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

Проблема возникает из-за неправильного понимания setTimeout () как функции sleep () других языков, когда она работает в соответствии со своим собственным набором правил.

Давайте посмотрим на следующий код.

//app.jsfor (let i = 1; i  console.log (  `# $ {i}`), 1000);} 

В приведенном выше коде мы пытаемся добиться того, чтобы регистрировать значение i каждую 1 секунду до тех пор, пока не будет выполнено условие цикла for. будет ложным.

Но когда вы запустите код, этого не произойдет. Вместо этого выполнение будет приостановлено на 1 секунду, а затем будут распечатаны 5 значений за раз.

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

Ну, вот как работает JavaScript. Он работает по своим правилам. SetTimeout (1000) не работает, как будто он будет ждать 1 секунду между вашими вызовами функции console.log ().

См. вывод.

 node app # 1 # 2 # 3 # 4 # 5 

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

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

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

Но, к счастью, можно использовать setTimeout () для создания вашей собственной функции sleep () в JavaScript..

JavaScript wait ()

Чтобы заставить JavaScript ждать, используйте комбинацию Promises, async/await и setTimeout () функция, с помощью которой вы можете написать функцию wait (), которая будет работать так, как вы ожидаете.

Однако вы можете вызывать эту пользовательскую функцию wait () только из асинхронных функций, и вам нужно чтобы использовать с ним ключевое слово await.

Пример wait () в JavaScript

Создайте новый файл с именем app.js и напишите в этом файле следующий код.

//app.jsconst list = [1, 2, 3, 4] const task = async () =>  {for (элемент const списка) {ждать нового обещания (r => setTimeout (r, 1000));  console.log ('Yello, D ' ой ');  }} task (); 

Вывод

 node appYello, D'ohYello, D'ohYello, D'ohYello, D  'oh 

Здесь мы используем только одну строку кода, которая будет ждать нас.

 await new Promise (r => setTimeout (r, 1000  )); 

Этот код работает именно так, как вы могли ожидать, потому что await заставляет синхронное выполнение кода приостанавливаться до тех пор, пока обещание не будет разрешено.

Заключение

JavaScript может не иметь функции sleep () или wait (), но достаточно легко создать функцию или написать одну строку кода с помощью встроенного setTimeout (), если вы очень внимательно относитесь к коду и его использованию.

Сама по себе функция setTimeout () не работает как метод sleep (), но вы можете создать пользовательская функция JavaScript sleep () или wait () с использованием async и await.

Это для примера ожидания Javascript.

Оцените статью
nanomode.ru
Добавить комментарий