JavaScript Wait：如何创建Wait函数

尼耳多
1,084 阅读3分钟

JavaScript Wait - How to Make Function Wait in JavaScript

JavaScript没有为定时事件提供任何像wait()这样的本地函数。说到JavaScript中的定时事件，有以下函数可以在你的项目中使用。

  1. setTimeout()
  2. clearInterval()
  3. setInterval()

许多编程语言都有sleep函数，它可以在给定的秒数内等待程序的执行。但是JavaScript没有这个原生函数。

JavaScript setTimeout()

**setTimeout()**是一个内置的JavaScript函数，可以在指定的毫秒数后调用一个函数或评估一个表达式。不幸的是，根据你的使用方式，独立的setTimeout()并不像你预期的那样工作。你可能已经在JavaScript循环中的某个点上试过了，看到setTimeout()函数似乎根本不起作用。

问题产生于误将setTimeout()理解为其他语言的sleep()函数，而它是按照自己的一套规则工作的。

让我们看看下面的代码。

// app.js

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

在上面的代码中，我们想实现的是，我们想每隔1秒记录一次数值i，直到for循环条件为假。

但是当你运行这段代码时，这不会发生。相反，执行将暂停1秒，然后一次打印5个值。

嗯，这不是应该发生的。我们需要每隔1秒记录一次数值，而不是等待1秒后同时记录所有的数值。

嗯，这就是JavaScript的工作方式。它按照自己的规则工作。所以，举例来说，setTimeout(1000)的工作方式并不像在你调用console.log()函数之间等待1秒那样。

请看输出。

 node app
#1
#2
#3
#4
#5

这导致所有五条控制台日志信息在单次延迟1秒后一起显示，而不是每次重复调用之间延迟1秒的理想效果。

这是因为setTimeout()函数是作为同步代码执行的，对setTimeout()的多个函数调用都是同时进行的。因此，对setTimeout()的每次调用都会创建一个异步代码，该代码将在稍后执行，经过一定的延迟。由于代码片段中的每个延迟都是一样的（1000ms或1秒），所有排队的代码都同时运行，在单一的1秒延迟之后。

正如所讨论的，setTimeout()不是一个sleep()函数；相反，它只是将异步代码排入队列，供以后执行。

但幸运的是，在JavaScript中可以使用setTimeout()来创建你自己的sleep()函数。

JavaScript的Wait

为了让你的JavaScript代码Wait，使用Promises、async/await和setTimeout() 函数的组合，通过它你可以写出等待函数，它将按照你的期望工作。然而，你只能在async函数中调用这个自定义的wait()函数，而且你需要在其中使用await关键字。

JavaScript中的wait()例子

创建一个名为app.js 的新文件，在该文件中写下以下代码。

// app.js

const list = [1, 2, 3, 4]
const task = async () => {
  for (const item of list) {
    await new Promise(r => setTimeout(r, 1000));
    console.log('Yello, D\'oh');
  }
}

task();

输出

node app
Yello, D'oh
Yello, D'oh
Yello, D'oh
Yello, D'oh

在这里，我们使用这只是一行代码，它将为我们等待。

await new Promise(r => setTimeout(r, 1000));

这段代码的工作原理与你可能预期的完全一样，因为await会使代码的同步执行暂停，直到Promise被解决。

总结

JavaScript可能没有睡眠或等待函数，但只要你对代码和使用方法非常小心，就可以很容易地使用内置的setTimeout()函数创建一个函数或编写一行代码。

就其本身而言，setTimeout()函数不能作为sleep()方法使用，但你可以使用async和await创建一个自定义的JavaScriptWait()函数。

本教程就到此为止。

avatar
文章
阅读
粉丝