javascript里的sleep()方法

红太狼 2020-06-23 16:45 764阅读 0赞

# javascript里的sleep()方法

很多编程语言里都有`sleep()`，`delay()`等方法，它能让我们的程序不那么着急的去执行下一步操作，而是延迟、等待一段时间。软件开发中经常会遇到需要这样的函数，比如等待几分钟去检查某一事件是否发生。JavaScript里有`setTimeout()`方法来实现设定一段时间后执行某个任务，但写法很丑陋，需要提供回调函数：

```jstoolbar:false;toolbar:false;
setTimeout(function(){ alert("Hello"); }, 3000);
```

JavaScript Promise API是新出现了一个API，借助 Promise，我们可以对`setTimeout`函数进行改良，下面就是把`setTimeout()`封装成一个返回Promise的`sleep()`函数。

```js
// https://zeit.co/blog/async-and-await
function sleep (time) {
  return new Promise((resolve) => setTimeout(resolve, time));
}

// 用法
sleep(500).then(() => {
    // 这里写sleep之后需要去做的事情
})
```

你会发现，这种写法很优雅，很像其它编程语言里的延迟、等待函数。Promise API使我们避免传入回调函数，我们在实现中还使用了ES6中的箭头(arrow)函数。

这里需要提到的一个问题是，这个`sleep()`在执行的时候是“block”程序的继续执行的。它不是同步的。如果想让它同步执行，不妨碍执行之后的代码，我们可以使用` async/await `关键字。

```js
(async function() {
  console.log('Do some thing, ' + new Date());
  await sleep(3000);
  console.log('Do other things, ' + new Date());
})();
```

执行结果：

```
Do some thing, Mon Feb 23 2015 21:52:11 GMT+0800 (CST) ``Do other things, Mon Feb 23 2015 21:52:14 GMT+0800 (CST)
```

你会发现，这一次，`sleep()`并没有阻碍第二个`console`的执行。

但` async/await `是ES7中的语法，目前还是处于试验阶段。那现在想用这个` async/await `特性怎么办？可以尝试 google 的一个 JavaScript 预编译器 traceur，可以将高版本的 JavaScript 编译为 ES5 代码，已经实验性的支持了 async/await （需要使用 –experimental 来指定开启）。