es5、promise、async以及generator中实现sleep的方法

简要介绍:在多线程编程中,sleep的作用是起到挂起的作用,使线程休眠,而js是单线程的,我们如何在js中模拟sleep的效果呢~ 也就是如何用同步的方式来处理异步。

序:为什么不能用setTimeout来实现sleep的效果

因为sleep要实现的是同步进程或者说同步程序的挂起,而setTimeout本身是异步的,我们来举个例子:

function  test(){
  setTimeout(function(){console.log(111)},100);
  console.log(222);
}
test()
//先输出了222,后输出了111

从运行结果来看,先输出了222,后输出了111,因为setTimeout是异步的,因此这里通过setTimeout并没有实现sleep的效果。

1.循环的方式

function sleep(ms){
   var start=Date.now(),expire=start+ms;
   while(Date.now()<expire);
   console.log('1111');
   return;
}

执行sleep(1000)之后,休眠了1000ms之后输出了1111。上述循环的方式缺点很明显,容易造成死循环。

2 . 通过promise来实现

function sleep(ms){
  var temple=new Promise(
  (resolve)=>{
  console.log(111);setTimeout(resolve,ms)
  });
  return temple
}
sleep(500).then(function(){
   //console.log(222)
})

//先输出了111,延迟500ms后输出222

3.通过async封装

function sleep(ms){
  return new Promise((resolve)=>setTimeout(resolve,ms));
}
async function test(){
  var temple=await sleep(1000);
  console.log(1111)
  return temple
}
test();
//延迟1000ms输出了1111

4 .通过generate来实现

function* sleep(ms){
   yield new Promise(function(resolve,reject){
             console.log(111);
             setTimeout(resolve,ms);
        })  
}
sleep(500).next().value.then(function(){console.log(2222)})

猜你喜欢

转载自blog.csdn.net/liwusen/article/details/78489442
今日推荐