电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

javascript 使用sleep函數的常見方法詳解

瀏覽:3日期:2023-11-01 15:40:54

本文實例講述了javascript 使用sleep函數的常見方法。分享給大家供大家參考,具體如下:

一.什么是sleep函數?

花一點時間來聊一下sleep函數,首先什么是sleep函數?

sleep是一種函數,他的作用是使程序暫停指定的時間,起到延時的效果。

例如:

console.log(’1’);sleep(5000);console.log(’2’);

控制臺輸出數字1后會間隔5秒后輸出數字2

當然上面的代碼是不能執行的,因為js中是沒有sleep方法的。

所以這一篇文章主要介紹幾種在js中實現sleep的方式。

二.為什么使用sleep?

看到這里有人會問了,為什么要使用sleep,上面的例子我可以使用setTimeout來實現啊?

因為setTimeout是通過回調函數來實現定時任務的,所以在多任務的場景下就會出現回調嵌套:

console.time(’runTime:’);setTimeout(function(){ console.log(’1’) setTimeout(function(){ console.log(’2’); setTimeout(function(){ console.log(’3’); console.timeEnd(’runTime:’); }, 2000); }, 3000);}, 2000);// 1// 2// 3// runTime:: 7013.104ms

上面的方式存在回調嵌套的問題,我們希望有一個優雅的方式來實現上面的例子:

sleep(2000);console.log(’1’);sleep(3000);console.log(’2’);sleep(2000);console.log(’3’);...

三.實現sleep

接下來我們就分別用幾種不同的方法來實現下sleep方法

1.基于Date實現

通過死循環來阻止代碼執行,同時不停比對是否超時。

function sleep(time){ var timeStamp = new Date().getTime(); var endTime = timeStamp + time; while(true){ if (new Date().getTime() > endTime){ return; } }}console.time(’runTime:’);sleep(2000);console.log(’1’);sleep(3000);console.log(’2’);sleep(2000);console.log(’3’);console.timeEnd(’runTime:’);// 1// 2// 3// runTime:: 7004.301ms

缺點:

以上的代碼不會讓線程休眠,而是通過高負荷計算使cpu無暇處理其他任務。

這樣做的缺點是在sleep的過程中其他所有的任務都會被暫停,包括dom的渲染。

所以sleep的過程中程序會處于假死狀態,并不會去執行其他任務

2.基于Promise的sleep

為了解決ajax的回調嵌套問題,在jQuery1.8之后支持了Promise。但是單純的Promise只是將之前的縱向嵌套改為了橫向嵌套,

最終結果是下面的代碼:

function sleep(time){ return new Promise(function(resolve){ setTimeout(resolve, time); });}console.time(’runTime:’);console.log(’1’);sleep(1000).then(function(){ console.log(’2’); sleep(2000).then(function(){ console.log(’3’); console.timeEnd(’runTime:’); });});console.log(’a’);// 1// a// 2// 3// runTime:: 3013.476ms

這其實和之前的setTimeout嵌套沒什么區別,也很難看。

我們再次進行優化,使用ES6的Generator函數來改寫上面的例子

3.基于Generator函數的sleep

我們對sleep的執行使用Generator函數來執行,并且搭配co來進行自執行。

看代碼:

var co = require(’co’); function sleep(time){ return new Promise(function(resolve){ setTimeout(resolve, time); });} var run = function* (){ console.time(’runTime:’); console.log(’1’); yield sleep(2000); console.log(’2’); yield sleep(1000); console.log(’3’); console.timeEnd(’runTime:’);} co(run);console.log(’a’);// 1// a// 2// 3// runTime:: 3004.935ms

可以看到整體的代碼看起來不存在嵌套的關系,還是比較舒服的。

并且執行過程不會發生假死情況,不會阻塞其他任務的執行。

但是多了一個co執行器的引用,所以還是有瑕疵。

當然這不是最終版,因為ES7為我們帶來了新的解決方案。

4.基于async函數的sleep

ES7新增了async函數,async函數最大的特點就是自帶執行器,所以我們可以不借助co來實現sleep了

看代碼:

function sleep(time){ return new Promise((resolve) => setTimeout(resolve, time));} async function run(){ console.time(’runTime:’); console.log(’1’); await sleep(2000); console.log(’2’); await sleep(1000); console.log(’3’); console.timeEnd(’runTime:’);} run();console.log(’a’); // 1// a// 2// 3// runTime:: 3009.984ms

效果和之前的一樣。

5.使用child_process(子進程)實現sleep函數

前面介紹了幾種比較簡單的sleep實現,接下來看一個比較難的實現。

原理是將sleep放在子進程中執行,不會影響其他進程,看代碼:

var childProcess = require(’child_process’);var nodeBin = process.argv[0]; function sleep(time) { childProcess.execFileSync(nodeBin, [’-e’, ’setTimeout(function() {}, ’ + time + ’);’]); // childProcess.spawnSync(nodeBin, [’-e’, ’setTimeout(function() {}, ’ + time + ’);’]);} console.time(’runTime:’);console.log(’1’);sleep(1000);console.log(’2’);sleep(2000);console.log(’3’);console.timeEnd(’runTime:’); // 1// 2// 3// runTime:: 3579.093ms

以上代碼,是通過childProcess對象的execFileSync或者spawnSync創建一個同步進程,

在同步進程中執行定時器,定時器執行完畢后回收進程,程序繼續執行。

6.使用npm sleep包

前面的內容都是我們自己實現的,其實npm上已經有很多相關的js包了。

我們來看看他們是怎么實現的,sleep

var sleep = require(’sleep’); console.log(’1’);console.time(’runTime:’);sleep.sleep(2); //休眠2秒鐘console.log(’2’);sleep.msleep(1000); //休眠1000毫秒console.log(’3’);sleep.usleep(1000000) //休眠1000000微秒 = 1秒console.log(’4’);console.timeEnd(’runTime:’); // 1// 2// 3// 4// runTime:: 4014.455ms

很強有沒有,sleep包是C++編寫,然后擴展到Node來實現sleep函數也是一個不錯的選擇。

以上就是sleep的六種簡單實現。歡迎大家指出問題,我們一起進步。

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具:http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

更多關于JavaScript相關內容可查看本站專題:《JavaScript常用函數技巧匯總》、《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。

標簽: JavaScript
相關文章:
主站蜘蛛池模板: 不锈钢管件(不锈钢弯头,不锈钢三通,不锈钢大小头),不锈钢法兰「厂家」-浙江志通管阀 | 采暖炉_取暖炉_生物质颗粒锅炉_颗粒壁炉_厂家加盟批发_烟台蓝澳采暖设备有限公司 | 沈阳庭院景观设计_私家花园_别墅庭院设计_阳台楼顶花园设计施工公司-【沈阳现代时园艺景观工程有限公司】 | 水冷式工业冷水机组_风冷式工业冷水机_水冷螺杆冷冻机组-深圳市普威机械设备有限公司 | 高压油管,液压接头,液压附件-烟台市正诚液压附件 | 山东臭氧发生器,臭氧发生器厂家-山东瑞华环保设备 | 成都办公室装修-办公室设计-写字楼装修设计-厂房装修-四川和信建筑装饰工程有限公司 | 防堵吹扫装置-防堵风压测量装置-电动操作显示器-兴洲仪器 | 镀锌方管,无缝方管,伸缩套管,方矩管_山东重鑫致胜金属制品有限公司 | 不锈钢闸阀_球阀_蝶阀_止回阀_调节阀_截止阀-可拉伐阀门(上海)有限公司 | 量子管通环-自清洗过滤器-全自动反冲洗过滤器-北京罗伦过滤技术集团有限公司 | 【同风运车官网】一站式汽车托运服务平台,验车满意再付款 | 爱佩恒温恒湿测试箱|高低温实验箱|高低温冲击试验箱|冷热冲击试验箱-您身边的模拟环境试验设备技术专家-合作热线:400-6727-800-广东爱佩试验设备有限公司 | 恒温槽_恒温水槽_恒温水浴槽-上海方瑞仪器有限公司 | 安全,主动,被动,柔性,山体滑坡,sns,钢丝绳,边坡,防护网,护栏网,围栏,栏杆,栅栏,厂家 - 护栏网防护网生产厂家 | 胶原检测试剂盒,弹性蛋白检测试剂盒,类克ELISA试剂盒,阿达木单抗ELISA试剂盒-北京群晓科苑生物技术有限公司 | 石家庄网站建设|石家庄网站制作|石家庄小程序开发|石家庄微信开发|网站建设公司|网站制作公司|微信小程序开发|手机APP开发|软件开发 | 深圳激光打标机_激光打标机_激光焊接机_激光切割机_同体激光打标机-深圳市创想激光科技有限公司 深圳快餐店设计-餐饮设计公司-餐饮空间品牌全案设计-深圳市勤蜂装饰工程 | 北京翻译公司-专业合同翻译-医学标书翻译收费标准-慕迪灵 | 国际船舶网 - 船厂、船舶、造船、船舶设备、航运及海洋工程等相关行业综合信息平台 | 大白菜官网,大白菜winpe,大白菜U盘装系统, u盘启动盘制作工具 | 好看的韩国漫画_韩漫在线免费阅读-汗汗漫画 | 成都治疗尖锐湿疣比较好的医院-成都治疗尖锐湿疣那家医院好-成都西南皮肤病医院 | 电动液压篮球架_圆管地埋式篮球架_移动平箱篮球架-强森体育 | 偏心半球阀-电动偏心半球阀-调流调压阀-旋球阀-上欧阀门有限公司 | 全自动贴标机-套标机-工业热风机-不干胶贴标机-上海厚冉机械 | 济南冷库安装-山东冷库设计|建造|冷库维修-山东齐雪制冷设备有限公司 | 氮化镓芯片-碳化硅二极管 - 华燊泰半导体 | 真空吸污车_高压清洗车厂家-程力专用汽车股份有限公司官网 | 威海防火彩钢板,威海岩棉复合板,威海彩钢瓦-文登区九龙岩棉复合板厂 | 塑料瓶罐_食品塑料瓶_保健品塑料瓶_调味品塑料瓶–东莞市富慷塑料制品有限公司 | 微型实验室真空泵-无油干式真空泵-微型涡旋耐腐蚀压缩机-思科涡旋科技(杭州)有限公司 | 海水晶,海水素,海水晶价格-潍坊滨海经济开发区强隆海水晶厂 | 胜为光纤光缆_光纤跳线_单模尾纤_光纤收发器_ODF光纤配线架厂家直销_北京睿创胜为科技有限公司 - 北京睿创胜为科技有限公司 | 产业规划_产业园区规划-产业投资选址及规划招商托管一体化服务商-中机院产业园区规划网 | 水性漆|墙面漆|木器家具漆|水漆涂料_晨阳水漆官网 | 内窥镜-工业内窥镜厂家【上海修远仪器仪表有限公司】 | 注塑_注塑加工_注塑模具_塑胶模具_注塑加工厂家_深圳环科 | 艾默生变频器,艾默生ct,变频器,ct驱动器,广州艾默生变频器,供水专用变频器,风机变频器,电梯变频器,艾默生变频器代理-广州市盟雄贸易有限公司官方网站-艾默生变频器应用解决方案服务商 | 吹田功率计-长创耐压测试仪-深圳市新朗普电子科技有限公司 | 防水套管|柔性防水套管|伸缩器|伸缩接头|传力接头-河南伟创管道 防水套管_柔性防水套管_刚性防水套管-巩义市润达管道设备制造有限公司 |