javascript(ES5,ES6)中实现sleep的方法

来源:互联网 发布:Js定义字符串编码 编辑:程序博客网 时间:2024/05/17 04:42

简要介绍:在多线程编程中,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。上述循环的方式缺点很明显,容易造成死循环。

  1. 通过promise来实现
function sleep(ms){  var temple=new Promise(  (resolve)=>{  console.log(111);setTimeout(resolve,ms)  });  console.log(222);  return temple}sleep(500).then(function(){   //console.log('something')})//先输出了111,后输出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

2017年12月1日补充: 方法2其实还是异步的,必须有await同步等待,才能完成sleep的效果。定义promise函数主体内还是异步的,实现同步的关键在于await~