JavaScript 实现Sleep方法(多个setTimeout同步执行) 前言 解决办法

JavaScript是单线程的,如果所有操作都是同步,必将线程堵塞,页面失去响应。因此JavaScript采用了事件驱动机制,在单线程模型下,使用异步回调函数的方式来实现非阻塞的IO操作。因此也就出现了多个setTimeout存在时,不能达到理想的效果。那么在JavaScript中实现其他语言中Sleep的效果呢?

解决办法

首先借助Promise对setTimeout函数进行改良,实现一个返回Promise的Sleep函数。

function Sleep (time) {
  return new Promise((resolve) => setTimeout(resolve, time));
}
// 用法
Sleep(5000).then(() => {
    //Do some thing
})

这里用到了ES6中的箭头(arrow)函数,但是这里不是同步的,我们需要借助 async/await 关键字。

//引用JQuery
$(async function() {
  console.log('Do some thing, ' + new Date());
  await Sleep(5000);
  console.log('Do some thing, ' + new Date());
});

function Sleep (time) {
  return new Promise((resolve) => setTimeout(resolve, time));
}

借助 async/await 关键字,我们就实现了类似于其他语言中的Sleep函数。