实例详解JavaScript中setTimeout函数的执行顺序


Posted in Javascript onJuly 12, 2017

前言

setTimeout,前端工程师必定会打交道的一个函数。它看上去非常的简单,朴实,有着一个很不平凡的名字--定时器。其实网上关于JavaScript中setTimeout的文章很多,但总感觉例子不够直接具体,因此写了个简单的例子并加以解释希望能让大家明白setTimeout是如何执行的。下面话不多说了,来一起看看详细的介绍:

实例代码如下:

var time1=new Date().getTime();
 console.log(1,time1);
 setTimeout(function(){
 var time4=new Date().getTime();
 console.log(4,time4);
 for(var a=0;a<10000000000;a++){
  a=a+1;
 }
 var time2=new Date().getTime();
 console.log(2,time2);
 },2000);

 setTimeout(function(){
 var time3=new Date().getTime();
 console.log(3,time3);
 },1000);
 setTimeout(function(){
 var time5=new Date().getTime();
 console.log(5,time5);
 },3000);
 setTimeout(function(){
 var time6=new Date().getTime();
 console.log(6,time6);
 },14000);

代码十分简单,想必大家都能看懂,执行结果如下:

实例详解JavaScript中setTimeout函数的执行顺序

解释:setTimeout属于异步执行函数,当程序执行完console.log(1,time1)后;遇到setTimeout会将该函数放入等待队列,等待当前主程序执行完毕后开始执行setTimeout,由于后面的几个都是setTimeout,因此都会放到等待队列~~~

那么这些队列里的函数谁先执行呢?就是根据setTimeout里的第二个参数(延迟时间)决定的,例如            

setTimeout(function(){
 var time3=new Date().getTime();
 console.log(3,time3);
 },1000);

那么主程序执行完成以后的1000ms后就会执行这段代码,如果延迟时间为2000,那么主程序执行完成后2000ms就会执行这段代码,只需记住一点:延迟时间始终是相对主程序执行完毕的那个时间算的 ,并且多个setTimeout的先后顺序也是由这个延迟时间决定的,如果遇到某个setTimeout需要花费大量的时间怎么办?可以参照上图里执行结果的数字2和数字5对应的时间,由于js是单线程,所以当执行到这个setTimeout后,会将这个程序执行完成后再去执行下一个setTimeout,无论下一个setTimeout的延迟时间为多少,如果这两个setTimeout时间的差值小于第一个setTimeout消耗的时间,程序会等待这个setTimeout执行完成后立即执行下一个setTimeout,如果差值大于消耗的时间,就按照和主程序约定的延迟(setTimeout里的第二个参数)执行即可

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
一个可以兼容IE FF的加为首页与加入收藏实现代码
Nov 02 Javascript
jquery $(document).ready() 与window.onload的区别
Dec 28 Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
Jul 09 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
Nov 25 Javascript
ExtJS4中使用mixins实现多继承示例
Dec 03 Javascript
javascript高级编程之函数表达式 递归和闭包函数
Nov 29 Javascript
Document.body.scrollTop的值总为零的快速解决办法
Jun 09 Javascript
JavaScript禁止用户多次提交的两种方法
Jul 24 Javascript
ES6学习之变量的两种命名方法示例
Jul 18 Javascript
详解vue-loader在项目中是如何配置的
Jun 04 Javascript
了解JavaScript表单操作和表单域
May 27 Javascript
vue-cli3自动消除console.log()的调试信息方式
Oct 21 Javascript
详解Node项目部署到云服务器上
Jul 12 #Javascript
angular.js中解决跨域问题的三种方式
Jul 12 #Javascript
JavaScript+HTML5实现的日期比较功能示例
Jul 12 #Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
Jul 12 #Javascript
Bootstrap提示框效果的实例代码
Jul 12 #Javascript
JavaScript输出所选择起始与结束日期的方法
Jul 12 #Javascript
微信小程序三级联动地址选择器的实例代码
Jul 12 #Javascript
You might like
一篇有意思的技术文章php介绍篇
2010/10/26 PHP
php遍历文件夹和文件列表示例分享
2014/03/11 PHP
PHP实现递归复制整个文件夹的类实例
2015/08/03 PHP
超详细的php用户注册页面填写信息完整实例(附源码)
2015/11/17 PHP
JavaScript使用prototype定义对象类型(转)[
2006/12/22 Javascript
关于取不到由location.href提交而来的上级页面地址的解决办法
2009/07/30 Javascript
jQuery学习笔记之Helloworld
2010/12/22 Javascript
jQuery 名称冲突的解决方法
2011/04/08 Javascript
JQuery扩展插件Validate 5添加自定义验证方法
2011/09/05 Javascript
jquery高效反选具体实现
2013/05/05 Javascript
用javascript判断IE版本号简单实用且向后兼容
2013/09/11 Javascript
前端轻量级MVC框架CanJS详解
2014/09/26 Javascript
Juery解决tablesorter中文排序和字符范围的方法
2015/05/06 Javascript
js实现简单的省市县三级联动效果实例
2016/02/18 Javascript
基于BootStarp的Dailog
2016/04/28 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
2016/06/18 Javascript
jQuery Masonry瀑布流插件使用方法详解
2017/01/18 Javascript
利用Javascript裁剪图片并存储的简单实现
2017/03/13 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
2017/06/13 Javascript
vue.js全局API之nextTick全面解析
2017/07/07 Javascript
从parcel.js打包出错到选择nvm的全部过程
2018/01/23 Javascript
Python中字符串的修改及传参详解
2016/11/30 Python
django基础之数据库操作方法(详解)
2017/05/24 Python
Pandas 数据处理,数据清洗详解
2018/07/10 Python
Python 面试中 8 个必考问题
2018/11/16 Python
python requests使用socks5的例子
2019/07/25 Python
Python udp网络程序实现发送、接收数据功能示例
2019/12/09 Python
哥伦比亚加拿大官网:Columbia Sportswear Canada
2020/09/07 全球购物
求职推荐信
2013/10/28 职场文书
教师演讲稿范文
2014/01/08 职场文书
上课玩手机检讨书
2014/02/08 职场文书
同学聚会主持词
2014/03/18 职场文书
中文专业求职信
2014/06/20 职场文书
纪律教育学习月活动总结
2014/08/27 职场文书
村党支部群众路线教育实践活动对照检查材料
2014/09/26 职场文书
街道党工委党的群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书