Вы можете просто использовать метод setTimeout()
, чтобы сделать паузу, прежде чем продолжить выполнение кода в JavaScript. Время задержки выполнения скрипта указывается в миллисекундах (тысячных долях секунды).
Давайте посмотрим следующий пример, чтобы понять, как это работает:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Wait Before Continuing</title>
<script>
function doStuff(){
// Код для запуска перед паузой
var hintDiv = document.getElementById("hint");
hintDiv.insertAdjacentHTML('afterbegin', '<p>An alert will be shown in 3 seconds.</p>');
setTimeout(function(){
// Код для запуска после паузы
alert("This is really slow!");
}, 3000);
// Это также будет выполняться перед предупреждением
hintDiv.insertAdjacentHTML('beforeend', '<p>Alert is coming. Please do not go!</p>');
}
</script>
</head>
<body>
<div id="hint"></div>
<button type="button" onclick="doStuff()">Run Script</button>
</body>
</html>
Как вы заметили в предыдущем примере, JS-код после метода setTimeout()
продолжает выполнение. Однако, если вам нужен настоящий «сон», когда все дальнейшее выполнение кода JavaScript должно прекратиться, вы можете использовать конструктор Promise
. Давайте посмотрим пример, как это работает:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Sleep Between Execution</title>
<script>
async function doStuff(){
// Код для запуска перед паузой
var hintDiv = document.getElementById("hint");
hintDiv.insertAdjacentHTML('afterbegin', '<p>An alert will be shown in 3 seconds.</p>');
// Пауза в течение 3 секунд
await new Promise(r => setTimeout(r, 3000));
// Код для запуска после паузы
alert("This is really slow!");
hintDiv.insertAdjacentHTML('beforeend', '<p>You have seen the alert. Goodbye!</p>');
}
</script>
</head>
<body>
<div id="hint"></div>
<button type="button" onclick="doStuff()">Run Script</button>
</body>
</html>
Оператор await
используется для ожидания. Его можно использовать только внутри функции async
.