极客笔记JavaScript Sleep() 函数
Sleep()
使用 sleep() 函数，我们可以使程序暂停执行一段固定的时间。在编程语言如 C 和 PHP 中，我们会调用 sleep(sec) 。Java 使用的是 thread.sleep() ，Python 使用的是 time.sleep() ，而 Go 则使用 time.Sleep(2 * time.Second) 。
JavaScript 并没有这样的 sleep 函数。 但是我们应该感谢 ES 2018 中引入的 promises 和 async/await 函数 ，因为这些特性使我们可以尽可能轻松地使用 sleep() 函数。让我们简要讨论一下。
语法-1
sleep(Time in ms).then(() => {
//// code
})
我们可以像上面展示的那样使用带有回调函数的睡眠函数。
语法-2
const work = async () => {
await sleep(Time in ms)
//code
}
work()
我们可以在async/await函数中使用sleep()函数，如上所示。
示例
在下面的示例中，我们使用了async/await函数和sleep()函数。在开始函数后，初始时会显示async函数中的文本“Hello Tutorix”。然后，使用sleep函数暂停函数3秒钟。完成时间段后，显示在sleep()函数后面的文本“Welcome to ……..”。这个过程会重复直到循环终止，也就是总共会重复19次，如输出所示。
<html>
<body>
<script>
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function Tutor() {
document.write('Hello Toturix');
for (let i = 1; i <20 ; i++) {
await sleep(3000);
document.write( i +" "+"Welcome to tutorix" + " " + "</br>");
}
}
Tutor()
</script>
</body>
</html>
输出
Hello Tutorix
// after 3 secs
1 Welcome to tutorix
// after 3sec...and the text will repeat until the loop terminates for every 3 sec
2 Welcome to tutorix
3 Welcome to tutorix
4 Welcome to tutorix
5 Welcome to tutorix
6 Welcome to tutorix
7 Welcome to tutorix
8 Welcome to tutorix
9 Welcome to tutorix
10 Welcome to tutorix
11 Welcome to tutorix
12 Welcome to tutorix
13 Welcome to tutorix
14 Welcome to tutorix
15 Welcome to tutorix
16 Welcome to tutorix
17 Welcome to tutorix
18 Welcome to tutorix
19 Welcome to tutorix