html页面睡眠函数,JavaScript sleep睡眠函数
1.sleep函数
JavaScript是单线程运行的,没有内置的sleep函数,现在模拟实现sleep延迟执行的效果。
使用睡眠函数实现红绿灯代码,红灯2秒,黄灯1秒,绿灯3秒,循环改变颜色。
2. setTimeout
直接使用setTimeout实现sleep()的方法,兼容性最好,但是使用了回调函数的实现方式,代码的可读性和维护性不是很好。
// setTimeout
let fun = () => console.log('time out');
let sleep = function(fun,time){
setTimeout(()=>{
fun();
},time);
}
sleep(fun,2000);
复制代码
setTimeout
setTimeout是最基本的实现方式,代码如下,使用递归来实现循环改变颜色:
function changeColor(color) {
console.log('traffic-light ', color);
}
function main() {
changeColor('red');
setTimeout(()=>{
changeColor('yellow');
setTimeout(() => {
changeColor('green');
setTimeout(main, 2000);
}, 1000);
}, 2000);
}
main();
复制代码
3.Promise
在ES6的语法中,Promise是sleep方法异步的实现一种方式,借助Promise方法可以优雅的构建sleep实现方法,避免了使用函数回调的使用方式。
// promise
let fun = () => console.log('time out');
let sleep2= (time)=> new Promise((resolve)=>{
setTimeout(resolve,time)
})
sleep2(2000).then(fun);
复制代码
Promise
使用Promise,把下一次的颜色改变写在then里面,最后同样使用递归完成循环。
使用promise代替setTimeout,利用链式调用以及then来实现灯的转换,then返回一个promise对象,当这个对象为resolve状态then可以持续调用。
const traffic_light=(color,duration)=>{
return new Promise((resolve,reject)=>{
console.log('traffic-light ', color);
setTimeout(()=>{
resolve()
},duration)
})
}
const main=()=>{
Promise.resolve()
.then(()=>{
return traffic_light('red',3000)
})
.then(()=>{
return traffic_light('yellow',1000)
})
.then(()=>{
return traffic_light('green',2000)
})
.then(()=>{
main();
})
}
main()
复制代码
4. async await
async await实际上是generator和promise的语法糖,在提供同步编程方式实现异步调用的基础上,同时满足对sleep函数语义化的支持,也是常用的sleep的实现方式。
// async await
async function wait(time){
await sleep2(time);
fun();
}
wait(3000);
复制代码
async await使用
使用async await就可以避免Promise的一连串.then.then.then,也不再需要递归,使用while(true)就可以实现循环。
function sleep(duration) {
return new Promise(resolve => {
setTimeout(resolve, duration);
})
}
async function changeColor(color, duration) {
console.log('traffic-light ', color);
await sleep(duration);
}
async function main() {
while (true) {
await changeColor('red', 2000);
await changeColor('yellow', 1000);
await changeColor('green', 3000);
}
}
main();
复制代码
5. 1s后输出1 2s后输出2 3s后输出3
const log = console.log;
const sleep = (timeout) => {
return new Promise((resolve)=>{
setTimeout(()=>{
resolve();
}, timeout)
})
}
const main = async()=>{
await sleep(1000);
log(1);
await sleep(2000);
log(2);
await sleep(3000);
log(3);
}
复制代码
参考文章:
html页面睡眠函数,JavaScript sleep睡眠函数相关推荐
- php加密js函数输出,PHP加密函数 Javascript/Js 解密函数的实现方法
这篇文章主要为大家详细介绍了PHP加密函数 Javascript/Js 解密函数的实现方法,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小玲来看看吧! 以下函数代码 ...
- html escape函数,JavaScript中escape()函数的使用方法
导语:我们在传递参数时,为了避免服务器端出现乱码,常常会要用到编码函数,urlencode.HtmlEncode.base64_encode等.本文给大家详细讲解JavaScript中escape() ...
- js加密 php解密,PHP加密函数 Javascript/Js 解密函数
以下函数代码中"123456" 是个加密的key,自己可以随便改. php加密,js解密,貌似没什么意义,主要是key在js中会被看到. 不过在某些地方可能会用到. PHP加密函数 ...
- JavaScript toFixed(num) 函数
number.toFixed(num) -- 将数字转换为一个小数点后有指定num位的字符串,非指数计数法,如果number大于1e+21将使用指数计数法 fixed,中文"固定" ...
- 如何得知深睡眠等各类进程的函数堆栈 -- DW-SW等
1. Abstract . 2. Introduction 我们开发的时候很痛苦的一件事情就是在进程进入深睡眠以后,没有调试手段,往往这种问题还 ...
- 转载_如何得知深睡眠等各类进程的函数堆栈 -- DW-SW等
1. Abstract . 2. Introduction 我们开发的时候很痛苦的一件事情就是在进程进入深睡眠以后,没有调试手段,往往这种问题还 ...
- javascript写的关于静态页面获取URL传递参数的函数[原创]
2005.04.29发表于blog.csdn.net/zxub 昨天搬家居然忘搬这篇文章了,郁闷~ 以前写了关于静态页面刷新后,跳转菜单定位的函数,前几天没事看了看,感觉还是有点问题,通用性不好,所以 ...
- javascript的匿名函数
古人有"授之以鱼,不如授之以渔" ,没有老师,就只能自己学"渔"了.还是从简单的开始吧! 下面的这几句代码是最熟悉不过的了,但是你知道为什么这么写吗?为什么在页 ...
- 5、JavaScript进阶篇②——函数、事件、内置对象
一.函数 1. 什么是函数 函数的作用,可以写一次代码,然后反复地重用这个代码. 如:我们要完成多组数和的功能. var sum; sum = 3+2; alert(sum);sum=7+8 ; al ...
- JavaScript中匿名函数的作用和用法
匿名函数可以有效的保证在页面上写入Javascript,而不会造成全局变量的污染. 这在给一个不是很熟悉的页面增加Javascript时非常有效,也很优美. 例: <!DOCTYPE html& ...
最新文章
- IOS 获取缓存目录文件大小并清除
- 东北能源大数据中心正式成立,一期将建设2.4万平方米数据中心
- VOA AGRICULTURE REPORT - Two Efforts Seek to Increase Food Security in Africa
- [-算法篇-] 开篇前言
- 关于《在Windows与.NET平台上的持续交付实践》的问答录
- 电脑开机动画_领克的开机画面,你修改了?
- 联机分析的列式数据库 clickHouse
- 如何解决Mybatis里mapper文件中关于不能用大于小于号
- 剑指 Offer 10- I. 斐波那契数列/剑指 Offer 10- II. 青蛙跳台阶问题
- 计算机专业学的东西其实很少,为什么计算机专业的学生要学习使用Linux系统?...
- 蓝桥杯2015年第六届C/C++省赛A组第九题-垒骰子
- 奎享添加自己字体_奎享雕刻软件写字操作简要说明
- Navicat: Cannot create filec:\Users\***\Documens\Navicat\MySql.....文件名、目录名或卷标语法不正确
- 【Golang】JSON Marshal Unmarshal
- [杜撰的故事]那天以后
- 第五届四川省职工职业技能大赛决赛计算机程序设计员技术文件大纲
- MySQL之mysqlcheck、check、optimize和analyze
- 百度新闻推荐真的在推荐新闻吗
- dual_contrastive_loss粗略解读
- registration.setOrder
热门文章
- 武大李星星团队开源的GNSS UPD估计模块(GREAT-UPD)window 下调试
- Linux编译DuiLib库报error: no matches converting function ‘ItemComareFunc’ to type ‘__compar_d_fn_t错误解决
- 运放参数的详细解释和分析-part2-如何测量输入偏置电流Ib和输入失调电流Ios
- python 图片(pil库)将两个图片合成一张
- hspace在表格中无效吗html,HTML代码汇总详解
- 阿里云 mysql 100_【故障公告】阿里云 RDS 数据库服务器 CPU 100% 造成全站故障
- Mac删除自带输入法
- 2022软考高项-知识点速记更新版(顺口溜)
- wps比对两列数据重复_“两个wps表格,怎么比对重复的数据?“两个表格对照核对...
- 云原生转换过程中常见的偏见和推动