js如何简短优雅地实现sleep函数?

摘要:sleep函数作用是让线程休眠,等到指定时间在重新唤起。那么在js中如何优雅的来实现呢?

sleep函数作用是让线程休眠,等到指定时间在重新唤起。那么在js中如何优雅的来实现呢?


方式一:利用循环

function pausecomp(millis){
var date = new Date(),curDate = null;
do { curDate = new Date(); }
while(curDate-date < millis);
}

使用:

pausecomp(1000);
console.log('fly63');//会在1秒后大于fly63

虽然很实现了延展等待,但这是一个非常可怕的解决方案,最好不要再实际项目中使用。因为这是一种死循环堵塞,CPU占用会很高,如果开着占CPU很高的程序(如有一堆flash的页面),很容易被卡死。

注意:语句继续执行就只能用while()空转的方法,判断到了时间就break。不过这个方法也不是真正sleep。虽然javascript不直接支持sleep,但是通过setTimeout可以模拟,即使是for循环中的sleep都是可以模拟的。


方案二:使用Promise

1、使用async和await

function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function test() {
await sleep(1000);
console.log('fly63');
}
test();

注意,

  1. await只能在以async关键字为前缀的函数中执行,或者在越来越多的环境中在脚本的顶层执行。
  2. await只暂停当前async功能。这意味着它不会阻止脚本其余部分的执行,这在绝大多数情况下都是您想要的。

2、使用then

如果不使用async和await,我们可以通过then来解决:

sleep(1000).then(()=>{
console.log('fly63')
})


方案三:使用回调函数

这估计是项目中最常用的方式了,尤其是之前的老项目,兼容性最好。

function sleep(ms, callback) {
setTimeout(callback, ms)
}
sleep(1000, () => {
console.log('fly63')
})


方案四:使用generator

generator(生成器)是ES6标准引入的新的数据类型。一个generator看上去像一个函数,但可以返回多次。

function* sleep(ms){
yield new Promise((resolve,reject)=>{
setTimeout(resolve,ms);
})
}
sleep(1000).next().value.then(()=>{
console.log("fly63")
})


本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://shenqiku.cn/article/FLY_10735