如何在继续使用 JavaScript 之前休眠
答案:使用setTimeout()方法
您可以简单地使用 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>正如您在前面的示例中所注意到的，在 setTimeout() 方法之后的 JS 代码会继续执行。 然而，如果你想要一个真正的休眠，所有进一步的 JavaScript 代码执行都应该停止，你可以使用 Promise 构造函数。 让我们尝试一个示例，看看它是如何工作的:
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript 在执行之间休眠</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 运算符用于等待 Promise。 它只能在 async 函数中使用。
FAQ 相关问题解答
以下是与此主题相关的更多常见问题解答:
