javascript 版本的 sleep() 是什么?
有时，我们在任何语言中通过保持时间延迟来执行某些任务。例如，我们正在制作一个每秒更新一次的计时器应用程序。在这种情况下，我们等待一秒钟，然后逐个更新第二个计时器。我们也称之为延迟或 sleep()。在 Java 等其他一些语言中，有一个 sleep() 函数用于等待一段时间。在本文中，我们将了解 javascript 中 sleep 的等效方法是什么。让我们遵循延迟生成的语法
语法(定义函数)
function sleep(t: 以毫秒为单位的时间) {
return new Promise( resolve => setTimeout( resolve, t ));
}
// 应用延迟
sleep(t)
语法(单行解决方案)
await new Promise( r => setTimeout( r, t: 毫秒时间));
语法(单行定义的另一种解决方案)
const sleep = ms => new Promise(r => setTimeout(r, t: 毫秒时间)); // 使用延迟，如: await sleep( <duration> );
让我们看一个例子，我们每秒打印一行。您无法在本文的输出中看到任何变化。您可以将其运行到本地系统或任何在线 HTML 编辑器中来查看效果，也可以将此代码保存到系统并在浏览器上运行。
示例
<!DOCTYPE html> <html> <head> <title>HTML Console</title> </head> <body> <h3> Output Console </h3> <p> Output: </p> <div id="output"> </div> <div id="opError" style="color : #ff0000"> </div> <script> var content = '' var error = '' var opDiv = document.querySelector('#output') var opErrDiv = document.querySelector('#opError') // actual javascript code try { function sleep(time) { return new Promise(resolve => setTimeout(resolve, time)); } async function printAndWait() { for (let i = 0; i < 10; i++) { content += `Printing line after waiting ${i} seconds...` + "<br>"; opDiv.innerHTML = content await sleep(i * 1000); } content += 'Printing is completed' + "<br>";opDiv.innerHTML = content } printAndWait(); } catch (err) { error += err } finally { // display on output console opDiv.innerHTML = content opErrDiv.innerHTML = error } </script> </body> </html>
在上一个示例中，我们使用了"await"关键字。此"await"关键字只能在异步函数(在函数定义之前存在 async 关键字的函数)内执行，否则，我们可以在越来越多的环境中在脚本的顶层使用 await。此 await 关键字仅暂停当前异步函数。因此，它不会阻止其余脚本的执行。如果我们确实想要一个阻塞构造，我们可以使用 Atomics.wait()，但这取决于浏览器，大多数浏览器不允许它在浏览器的主线程上执行
当我们使用承诺时，我们可以使用 .then() 函数在等待一段时间后执行一些代码。因此，从 sleep() 中，我们返回承诺，从 then() 函数中可以执行后续任务。请参阅示例以更好地理解。这里每行在两秒后打印。打印语句存在于异步睡眠方法下的匿名函数内。
示例
<!DOCTYPE html> <html> <head> <title>HTML Console</title> </head> <body> <h3> Output Console </h3> <p> Output: </p> <div id="output"> </div> <div id="opError" style="color : #ff0000"> </div> <script> var content = '' var error = '' var opDiv = document.querySelector('#output') var opErrDiv = document.querySelector('#opError') // actual javascript code try { function sleep(time) { return new Promise(resolve => setTimeout(resolve, time)); } async function printAndWait() { for (let i = 0; i < 10; i++) { await sleep(2000).then(() => { content += `Printing line after waiting 2 seconds` + "<br>"; opDiv.innerHTML = content }); } content += 'Printing is completed' + "<br>";opDiv.innerHTML = content } printAndWait(); } catch (err) { error += err } finally { // display on output console opDiv.innerHTML = content opErrDiv.innerHTML = error } </script> </body> </html>
让我们使用 sleep 制作一个 2 分钟的倒计时器。
示例 (HTML)
<!DOCTYPE html> <html> <title>Online Javascript Editor</title> <head> </head> <body> <button onclick = startTimer()> Start Timer </button> <button onclick = resetTimer()> Restart Timer </button> <h2 id = "timerText" > 2:00 </h2> </body> <script> seconds = 120; var timerElem; function resetTimer(){ timerElem = document.getElementById( "timerText" ); timerElem.innerHTML = "2:00"; seconds = 120; } function startTimer(){ timerElem = document.getElementById( "timerText" ); countDown(); } function sleep( time ) { return new Promise( resolve => setTimeout( resolve, time )); } function setCurrentTime(){ var min = Math.floor( seconds / 60); var sec = seconds % 60; var secStr = String(sec).padStart(2, '0'); time = `${min}:${secStr}`; timerElem.innerHTML = time; seconds -= 1; } async function countDown(){ while(seconds >= 0){ await sleep(1000).then(setCurrentTime); } } </script> </body> </html>
在此示例中，我们创建了两个按钮，用于启动和重置计时器。它将计时器重置为 2 分钟。每一秒后，它将"秒"值减少 1，然后以 m:ss 格式显示。这是 javascript 中 sleep 方法的一个示例。
结论
在某些应用程序中需要等待一段时间。与其他语言一样，javascript 也具有时间相关的触发功能，可以通过承诺来实现。由于计时器延迟与系统异步，因此我们必须使用 async 函数来执行它们。并且在调用 sleep() 方法之前使用 await 关键字。这些代码只是为了在使用延迟或睡眠时记住异步编程技巧。
