JavaScript를 사용하여 절전 또는 대기 구현

JavaScript에는 sleep() 함수가 없습니다. 이로 인해 코드는 실행을 재개하기 전에 지정된 시간 동안 대기하게 됩니다. 기다리기 위해 JavaScript가 필요한 경우 어떻게 해야 합니까? sleep() 函数，该函数会导致代码在恢复执行之前等待指定的时间段。如果需要JavaScript等待，该怎么做呢？

假设您想将三则消息记录到Javascript控制台，每条消息之间要延迟一秒钟。JavaScript中没有 sleep() 方法，所以你可以尝试使用下一个最好的方法 setTimeout()。

不幸的是，setTimeout() 不能像你期望的那样正常工作，这取决于你如何使用它。你可能已经在JavaScript循环中的某个点上试过了，看到 setTimeout() 似乎根本不起作用。

问题的产生是由于将 setTimeout() 误解为 sleep() 函数，而实际上它是按照自己的一套规则工作的。

在本文中，我将解释如何使用 setTimeout()，包括如何使用它来制作一个睡眠函数，使JavaScript暂停执行并在连续的代码行之间等待。

浏览一下 setTimeout() 的文档，它似乎需要一个 "延迟 "参数，以毫秒为单位。

回到原始问题，您尝试调用 setTimeout(1000) 在两次调用 console.log() 函数之间等待1秒。

不幸的是 setTimeout() 不能这样工作：

setTimeout(1000)
console.log(1)
setTimeout(1000)
console.log(2)
setTimeout(1000)
console.log(3)

for (let i = 0; i <= 3; i++) {
  setTimeout(1000)
  console.log(`#${i}`)
}

这段代码的结果完全没有延迟，就像 setTimeout() 不存在一样。

回顾文档，你会发现问题在于实际上第一个参数应该是函数调用，而不是延迟。毕竟，setTimeout() 实际上不是 sleep() 方法。

你重写代码以将回调函数作为第一个参数并将必需的延迟作为第二个参数：

setTimeout(() => console.log(1), 1000)
setTimeout(() => console.log(2), 1000)
setTimeout(() => console.log(3), 1000)

for (let i = 0; i <= 3; i++) {
  setTimeout(() => console.log(`#${i}`), 1000)
}

这样一来，三个console.log的日志信息在经过1000ms（1秒）的单次延时后，会一起显示，而不是每次重复调用之间延时1秒的理想效果。

在讨论如何解决此问题之前，让我们更详细地研究一下 setTimeout() 函数。

检查setTimeout ()

你可能已经注意到上面第二个代码片段中使用了箭头函数。这些是必需的，因为你需要将匿名回调函数传递给 setTimeout()，该函数将在超时后运行要执行的代码。

在匿名函数中，你可以指定在超时时间后执行的任意代码：

// 使用箭头语法的匿名回调函数。
setTimeout(() => console.log("你好!"), 1000)
// 这等同于使用function关键字
setTimeout(function() { console.log("你好!") }, 1000)

理论上，你可以只传递函数作为第一个参数，回调函数的参数作为剩余的参数，但对我来说，这似乎从来没有正确的工作：

// 应该能用，但不能用
setTimeout(console.log, 1000, "你好")

人们使用字符串解决此问题，但是不建议这样做。从字符串执行JavaScript具有安全隐患，因为任何不当行为者都可以运行作为字符串注入的任意代码。

// 应该没用，但确实有用
setTimeout(`console.log("你好")`, 1000)

那么，为什么在我们的第一组代码示例中 setTimeout() 失败？好像我们在正确使用它，每次都重复了1000ms的延迟。

原因是 setTimeout() 作为同步代码执行，并且对 setTimeout() 的多次调用均同时运行。每次调用 setTimeout() 都会创建异步代码，该代码将在给定延迟后稍后执行。由于代码段中的每个延迟都是相同的（1000毫秒），因此所有排队的代码将在1秒钟的单个延迟后同时运行。

如前所述，setTimeout() 实际上不是 sleep() 函数，取而代之的是，它只是将异步代码排入队列以供以后执行。幸运的是，可以使用 setTimeout() 在JavaScript中创建自己的 sleep() 函数。

如何编写sleep函数

通过Promises，async 和 await 的功能，您可以编写一个 sleep() 函数，该函数将按预期运行。

但是，你只能从 async 函数中调用此自定义 sleep() 函数，并且需要将其与 await 关键字一起使用。

这段代码演示了如何编写一个 sleep() 函数：

const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay))

const repeatedGreetings = async () => {
  await sleep(1000)
  console.log(1)
  await sleep(1000)
  console.log(2)
  await sleep(1000)
  console.log(3)
}
repeatedGreetings()

此JavaScript sleep() 函数的功能与您预期的完全一样，因为 await 导致代码的同步执行暂停，直到Promise被解决为止。

一个简单的选择

另外，你可以在第一次调用 setTimeout() 时指定增加的超时时间。

以下代码等效于上一个示例：

setTimeout(() => console.log(1), 1000)
setTimeout(() => console.log(2), 2000)
setTimeout(() => console.log(3), 3000)

使用增加超时是可行的，因为代码是同时执行的，所以指定的回调函数将在同步代码执行的1、2和3秒后执行。

它会循环运行吗？

如你所料，以上两种暂停JavaScript执行的选项都可以在循环中正常工作。让我们看两个简单的例子。

这是使用自定义 sleep()

각 메시지 사이에 1초의 지연을 두고 세 개의 메시지를 Javascript 콘솔에 기록한다고 가정해 보겠습니다. JavaScript에는 sleep() 메서드가 없으므로 차선책인 setTimeout()을 시도해 볼 수 있습니다. 🎜🎜안타깝게도 setTimeout()은 사용 방법에 따라 기대한 대로 작동하지 않습니다. 아마도 JavaScript 루프의 어느 시점에서 이 작업을 시도하여 setTimeout()이 전혀 작동하지 않는 것 같은 것을 확인했을 것입니다. 🎜🎜문제는 setTimeout()을 sleep() 함수로 오해하는 데서 발생하는데 실제로는 자체 규칙 집합에 따라 작동합니다. 🎜🎜이 기사에서는 JavaScript가 실행을 일시 중지하고 연속된 코드 줄 사이에서 대기하도록 하는 절전 기능을 만드는 방법을 포함하여 setTimeout()을 사용하는 방법을 설명하겠습니다. 🎜🎜setTimeout()에 대한 문서를 살펴보면 밀리초 단위의 "delay" 매개변수가 필요한 것 같습니다. 🎜🎜원래 질문으로 돌아가서, console.log() 함수 호출 사이에 1초를 기다리기 위해 setTimeout(1000)을 호출하려고 합니다. 🎜🎜안타깝게도 setTimeout()은 다음과 같이 작동하지 않습니다. 🎜

const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay))

async function repeatGreetingsLoop() {
  for (let i = 0; i <= 5; i++) {
      await sleep(1000)
    console.log(`Hello #${i}`)
    }
}
repeatGreetingsLoop()

🎜이 코드의 결과는 마치 setTimeout()이 존재하지 않는 것처럼 지연이 전혀 없습니다. . 🎜🎜문서를 다시 보면 문제는 실제로 첫 번째 매개변수가 지연이 아닌 함수 호출이어야 한다는 것입니다. 결국 setTimeout()은 실제로 sleep() 메서드가 아닙니다. 🎜🎜콜백 함수를 첫 번째 매개변수로, 필요한 지연을 두 번째 매개변수로 사용하도록 코드를 다시 작성합니다. 🎜

for (let i = 0; i <= 5; i++) {
  setTimeout(() => console.log(`Hello #${i}`), 1000 * i)
}

🎜이런 방식으로 세 개의 console.logs의 로그 정보는 단일 1000ms(1초) 후에 처리됩니다. ) 지연 후에는 각 반복 호출 사이에 1초를 지연시키는 이상적인 효과 대신 함께 표시됩니다. 🎜🎜이 문제를 해결하는 방법을 논의하기 전에 setTimeout() 함수를 더 자세히 살펴보겠습니다. 🎜

setTimeout() 확인

🎜위의 두 번째 코드 조각에서 화살표 기능이 사용된 것을 눈치채셨을 것입니다. 이는 시간 초과 후에 실행될 코드를 실행하는 익명 콜백 함수를 setTimeout()에 전달해야 하기 때문에 필요합니다. 🎜🎜익명 함수에서는 시간 초과 후 실행될 임의의 코드를 지정할 수 있습니다. 🎜rrreee🎜이론적으로는 함수를 첫 번째 매개변수로 전달하고 콜백 함수의 매개변수를 나머지 매개변수로 전달할 수도 있지만 저에게는 , 제대로 작동하지 않는 것 같았습니다. 🎜rrreee🎜사람들은 문자열을 사용하여 이 문제를 해결했지만 권장하지는 않습니다. 문자열에서 JavaScript를 실행하면 보안에 영향을 미칩니다. 악의적인 행위자가 문자열로 삽입된 임의의 코드를 실행할 수 있기 때문입니다. 🎜rrreee🎜그렇다면 첫 번째 코드 예제 세트에서 setTimeout()이 실패하는 이유는 무엇입니까? 올바르게 사용하고 있는 것 같습니다. 매번 1000ms 지연이 반복됩니다. 🎜🎜이유는 setTimeout()이 동기 코드로 실행되고 setTimeout()에 대한 여러 호출이 모두 동시에 실행되기 때문입니다. setTimeout()을 호출할 때마다 지정된 지연 후 나중에 실행될 비동기 코드가 생성됩니다. 코드 조각의 모든 지연은 동일하므로(1000ms) 대기열에 있는 모든 코드는 1초의 단일 지연 후에 동시에 실행됩니다. 🎜🎜앞서 언급했듯이 setTimeout()은 실제로 sleep() 함수가 아니며, 대신 나중에 실행하기 위해 비동기 코드를 대기열에 추가할 뿐입니다. 다행히 setTimeout()을 사용하여 JavaScript에서 자신만의 sleep() 함수를 만들 수 있습니다. 🎜

sleep 함수 작성 방법

🎜Promise, async 및 await 기능을 사용하여 다음을 작성할 수 있습니다. sleep() 함수는 예상대로 작동합니다. 🎜🎜그러나 이 사용자 정의 sleep() 함수는 async 함수에서만 호출할 수 있으며 await 키워드 사용과 함께 사용해야 합니다. . 🎜🎜이 코드는 sleep() 함수를 작성하는 방법을 보여줍니다. 🎜rrreee🎜이 JavaScript sleep() 함수는 예상한 대로 정확히 작동합니다. await는 Promise가 해결될 때까지 코드의 동기 실행을 일시 중지합니다. 🎜<h2 id="item-3">간단한 선택</h2>🎜또한 <code>setTimeout()을 처음 호출할 때 증가된 시간 초과를 지정할 수 있습니다. 🎜🎜다음 코드는 이전 예제와 동일합니다. 🎜rrreee🎜코드가 동시에 실행되므로 타임아웃을 늘리는 것이 가능하므로 동기 코드 실행 1초, 2초, 3초 후에 지정된 콜백 함수가 실행됩니다. 🎜

루프에서 실행되나요?

🎜예상할 수 있듯이 JavaScript 실행을 일시 중지하는 위의 두 옵션은 모두 루프 내에서 잘 작동합니다. 두 가지 간단한 예를 살펴보겠습니다. 🎜🎜이것은 사용자 정의 sleep() 함수를 사용하는 코드 조각입니다. 🎜

const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay))

async function repeatGreetingsLoop() {
  for (let i = 0; i <= 5; i++) {
      await sleep(1000)
    console.log(`Hello #${i}`)
    }
}
repeatGreetingsLoop()

这是一个简单的使用增加超时的代码片段：

for (let i = 0; i <= 5; i++) {
  setTimeout(() => console.log(`Hello #${i}`), 1000 * i)
}

我更喜欢后一种语法，特别是在循环中使用。

总结

JavaScript可能没有 sleep() 或 wait() 函数，但是使用内置的 setTimeout() 函数很容易创建一个JavaScript，只要你谨慎使用它即可。

就其本身而言，setTimeout() 不能用作 sleep() 函数，但是你可以使用 async 和 await 创建自定义JavaScript sleep() 函数。

采用不同的方法，可以将交错的（增加的）超时传递给 setTimeout() 来模拟 sleep() 函数。之所以可行，是因为所有对setTimeout() 的调用都是同步执行的，就像JavaScript通常一样。

希望这可以帮助你在代码中引入一些延迟——仅使用原始JavaScript，而无需外部库或框架。

祝您编码愉快！ 

英文原文地址：https://medium.com/dev-genius/how-to-make-javascript-sleep-or-wait-d95d33c99909

作者：Dr. Derek Austin

更多编程相关知识，请访问：编程视频！！

위 내용은 JavaScript를 사용하여 절전 또는 대기 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!