介绍 console.log (& # 39; 1 & # 39;);
睡眠(5000);
console.log (& # 39; 2 & # 39;); console.time(& # 39;运行时:& # 39;);
setTimeout(函数(){
console.log (& # 39; 1 & # 39;)
setTimeout(函数(){
console.log (& # 39; 2 & # 39;);
setTimeout(函数(){
console.log (& # 39; 3 & # 39;);
console.timeEnd(& # 39;运行时:& # 39;);
},2000);
},3000);
},2000);//1//2//3//运行时:7013.104 睡眠(2000);
console.log (& # 39; 1 & # 39;);
睡眠(3000);
console.log (& # 39; 2 & # 39;);
睡眠(2000);
console.log (& # 39; 3 & # 39;);
…
小编这次要给大家分享的是javascript如何使用睡眠函数,文章内容丰富,感兴趣的小伙伴可以来了解一下,希望大家阅读完这篇文章之后能够有所收获。
<强>一。什么是睡眠函数?
花一点时间来聊一睡下函数,首先什么是睡眠函数?
睡眠是一种函数,他的作用是使程序暂停指定的时间,起到延时的效果。
例如:
控制台输出数字1后会间隔5秒后输出数字2
当然上面的代码是不能执行的,因为js中是没有睡眠方法的。
所以这一篇文章主要介绍几种在js中实现睡眠的方式。
<强>二。为什么使用睡眠?
看到这里有人会问了,为什么要使用睡眠,上面的例子我可以使用setTimeout来实现啊?
因为setTimeout是通过回调函数来实现定时任务的,所以在多任务的场景下就会出现回调嵌套:
上女士面的方式存在回调嵌套的问题,我们希望有一个优雅的方式来实现上面的例子:
<强>三。实现睡眠
接下来我们就分别用几种不同的方法来实现下睡眠方法
<强> 1。基于日期实现
通过死循环来阻止代码执行,同时不停比对是否超时。
函数sleep () {
.getTime var日期时间戳=new () ();
var endTime=时间+时间;
而(真){
如果(新的日期().getTime()比;endTime) {
返回;
}
}
}
console.time(& # 39;运行时:& # 39;);
睡眠(2000);
console.log (& # 39; 1 & # 39;);
睡眠(3000);
console.log (& # 39; 2 & # 39;);
睡眠(2000);
console.log (& # 39; 3 & # 39;);
console.timeEnd(& # 39;运行时:& # 39;);//1//2//3//运行时:7004.301毫秒 缺点:
以上的代码不会让线程休眠,而是通过高负荷计算使cpu无暇处理其他任务。
这样做的缺点是在睡的过程中其他所有的任务都会被暂停,包括dom的渲染。
所以睡眠的过程中程序会处于假死状态,并不会去执行其他任务
<强> 2。基于承诺的睡眠
为了解决的ajax回调嵌套问题,在jQuery1.8之后支持了承诺。但是单纯的承诺只是将之前的纵向嵌套改为了横向嵌套,
最终结果是下面的代码:
函数sleep () {
返回新的承诺(函数(解决){
setTimeout(解决);
});
}
console.time(& # 39;运行时:& # 39;);
console.log (& # 39; 1 & # 39;);
睡眠(1000)(函数(){
console.log (& # 39; 2 & # 39;);
睡眠(2000)(函数(){
console.log (& # 39; 3 & # 39;);
console.timeEnd(& # 39;运行时:& # 39;);
});
});
console.log(& # 39;一个# 39;);//1//一个//2//3//运行时:3013.476毫秒 这其实和之前的setTimeout嵌套没什么区别,也很难看。
我们再次进行优化,使用ES6的发电机函数来改写上面的例子
<强> 3。基于发电机函数的睡眠
我们对睡眠的执行使用发电机函数来执行,并且搭配有限公司来进行自执行。
看代码:
javascript如何使用睡眠函数
