前言
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函数。