Задержка, сон, пауза и ожидание в JavaScript

 Hello
Goodbye!
World!

В ожидании вещей с setTimeout

Также возможно использовать setTimeoutsetInterval Например, вот как вы можете использовать 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();

Это предполагает, что элемент появится в какой-то момент. Если вы не уверены, что это так, вам нужно посмотреть на отмену таймера (используя clearTimeoutclearInterval

Если вы хотите узнать больше о методе JavaScript setTimeoutнашему руководству, в котором есть множество примеров, которые помогут вам в этом.

Управление потоком в современном JavaScript

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

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

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

Например, используя async await, мы можем переписать исходный код для получения информации из API GitHub:

 (async () => {
  const res = await fetch(`https://api.github.com/users/jameshibbard`);
  const json = await res.json();
  console.log(json.public_repos);
  console.log("Hello!");
})();

Теперь код выполняется сверху вниз. Интерпретатор JavaScript ожидает завершения сетевого запроса, и сначала регистрируется количество открытых репозиториев, а затем сообщение «Hello!».

Если это нечто большее, чем вы пытаетесь выполнить, я рекомендую вам прочитать нашу статью « Управление потоком данных в современном JS: обратные вызовы для обещаний в асинхронное / ожидание» .

Сон в родном JavaScript

Если вы все еще со мной, то, я думаю, вы вполне готовы заблокировать поток выполнения и заставить 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 Затем он создает пустую переменную currentDatedo ... while В цикле он многократно получает количество миллисекунд, прошедших с 1 января 1970 года, и присваивает значение ранее объявленной переменной currentDate Цикл будет продолжаться, пока разница между datecurrentDate

 function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

console.log("Hello");
sleep(2000).then(() => { console.log("World!"); });

 console.log("Hello");
sleep(2000)
  .then(() => { console.log("World!"); })
  .then(() => {
    sleep(2000)
      .then(() => { console.log("Goodbye!"); })
    });

 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!");

 Hello
Goodbye!
World!