文章

javascript sleep

javascript sleep

<link rel="stylesheet" href="https://js.how234.com/third-party/SyntaxHighlighter/shCoreDefault.css" type="text/css" /><script type="text/javascript" src="https://js.how234.com/third-party/SyntaxHighlighter/shCore.js"></script><script type="text/javascript"> SyntaxHighlighter.all(); </script>

javascript sleep的多种方式:

1、基于循环实现sleep;

//使用while循环 functionsleep(delay){ varstart=newDate().getTime(); while(newDate().getTime()-start<delay){ continue; } } console.log(1,newDate().getTime())//11631671203441 sleep(2000) console.log(2,newDate().getTime())//21631671205441

//使用for循环 functionsleep(delay){ for(varstart=Date.now();Date.now()-start<=delay;); } console.log(1,newDate().getTime())//11631671672290 sleep(2000) console.log(2,newDate().getTime())//21631671674290

优点:简单粗暴,通俗易懂。

缺点:以上的代码不会让线程休眠,而是通过高负荷计算使cpu无暇处理其他任务。这样做的缺点是在sleep的过程中其他所有的任务都会被暂停,包括dom的渲染。所以sleep的过程中程序会处于假死状态,并不会去执行其他任务

2、基于Promise实现sleep;

//使用promise functionsleep(delay){ returnnewPromise(resolve=> setTimeout(resolve,delay) ) } console.log(1,newDate().getTime())//11631672405810 sleep(2000).then(()=>{ console.log(2,newDate().getTime())//21631672407810 })

优点:这种方式实际上是用了 setTimeout,没有形成进程阻塞,不会造成性能和负载问题。

缺点:虽然不像 callback 套那么多层,但仍不怎么美观,而且当我们需要在某过程中需要停止执行(或者在中途返回了错误的值),还必须得层层判断后跳出,非常麻烦,而且这种异步并不是那么彻底,还是看起来别扭。

3、基于generate实现sleep;

//使用Generator function*sleep(delay){ yieldnewPromise(function(resolve,reject){ setTimeout(resolve,delay); }) } console.log(1,newDate().getTime())//11631673104689 sleep(2000).next().value.then(()=>{ console.log(2,newDate().getTime())//21631673106689 })

优点:同 Promise 优点,另外代码就变得非常简单干净

缺点:但不足也很明显,就是每次都要执行 next() 显得很麻烦,虽然有co(第三方包)可以解决,但就多包了一层不好看,错误也必须按co的逻辑来处理不爽。

4、基于 Async/Await 实现sleep;

//使用async/await functionsleep(delay){ returnnewPromise((resolve)=>setTimeout(resolve,delay)); } asyncfunctiontest(){ console.log(1,newDate().getTime())//11631686674068 awaitsleep(2000); console.log(2,newDate().getTime())//21631686676068 } test();

优点:同 Promise 和 Generator 优点。 Async/Await 可以看做是 Generator 的语法糖,Async 和 Await 相较于 * 和 yield 更加语义,另外各个函数都是扁平的,不会产生多余的嵌套,代码更加清爽易读。

缺点: ES7 语法存在兼容性问题,但有 babel 一切兼容性都不是问题

5、使用npm上的node-sleep包

//引入sleep包 varsleep=require('sleep'); console.log('1'); sleep.sleep(2);//休眠2秒钟 console.log('2'); sleep.msleep(2000);//休眠2000毫秒=2秒 console.log('3'); sleep.usleep(2000000)//休眠2000000微秒=2秒 console.log('4');

优点:能够实现更加精细的时间精确度,而且看起来就是真的 sleep 函数,清晰直白。

缺点:需要安装这个模块

以上就是小编今天的分享,希望可以帮助到大家。

Copyright © 2024 www.suishoucha.com All rights reserved. 随手查 版权所有. 网站地图 沪ICP备2023027676号