谈一谈Javascript中setTimeout
来源:互联网 发布:淘宝开个虚拟店 编辑:程序博客网 时间:2024/09/21 08:51
前段时间公司在开会的时候提到了Javascript里的setTimeout,同事们的讨论很有意思,决定和大家分享一下。
话不多说,上代码
//代码块Adocument.querySelector('button').onclick = function(){ / setTimeout(function f1() { console.log('你点击了button!'); }, 2000);}//代码块Bconsole.log("这是第一条日志");//代码块CsetTimeout(function f2() { console.log("快去点击按钮吧");}, 1000);//代码块Dconsole.log("这是第二条日志");
1.这是第一条日志
2.这是第二条日志
3.快去点击按钮吧 (延时1秒执行)
点击button 延时2秒输出“你点击了button!”
实际上执行过程是这样的的:
1.主线程执行代码块A ,发现有事件绑定,将事件注册到 Web API上
2.主线程执行代码块B ---->输出‘这是第一条日志’
3.主线程执行代码块C,发现有延时,将代码块C的内容拿出主线程,倒计时等待执行,倒计时完毕则进入回调执行队列
4.主线程执行代码块D(不被代码块C阻塞) --->输出‘这是第二条日志’
5.主线程全部执行完了,开始一个一个取回调执行队列的代码块来执行 --->输出'快去点击按钮!'
6.点击button时候,执行web api上之前注册的事件,发现是timeout,则倒计时等待,倒计时完毕则进入回调执行队列
7.主线程只要空闲,则执行回调执行队列 -->输出“你点击了button”
以上这些都可以使用一个很有趣的工具来可视化查看 可视化查看执行队列情况
如有错误,请指出,谢谢
1 0
- 谈一谈Javascript中setTimeout
- javascript中setTimeout()函数
- javascript中setTimeout应用
- javascript中setTimeOut用法
- 谈一谈面试中JavaScript的正则问题
- javascript settimeout中使用this
- JavaScript 中 setTimeout()的用法
- javascript中setTimeout的问题
- JavaScript中setTimeout的用法
- javascript中setTimeout和setInterval函数
- javascript中setTimeout 和setInterval的区别
- javascript中setTimeOut 和setInterval的区别
- javascript 中setTimeout 和setInterval 区别
- JavaScript中setTimeout和setInterval的使用
- JavaScript中SetInterval与setTimeout用法
- JavaScript中SetTimeout()计时器最大值是多少
- javascript中setTimeout 和setInterval的区别
- javascript中setTimeout 和 setInterval 的区别
- 深度学习的五个能力级别 深度学习
- System.arraycopy()实现数组之间的复制
- Android进阶——Sharedpreferences保存对象和图片等复杂类型的数据
- Git版本控制工具提交文件到GitHub上图文详解
- 因为咳嗽
- 谈一谈Javascript中setTimeout
- <context-param>与<init-param>的区别与作用
- 【java】在线支付
- 微软认知服务 人脸识别 API 之 查找相似
- 机器学习小组知识点22:学生t分布(Student t's Distribution)
- 《视频直播技术详解》系列之一:采集
- SurfaceView播放视频控件的使用
- 特朗普 胜选演讲 全文翻译(中文+英文)
- 自己做QQ–后台搭建