实例详解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、firefox的图片自动缩放的css跟js代码分享
Aug 12 Javascript
将文本输入框内容加入表中的js代码
Aug 18 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
Aug 30 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
Mar 19 Javascript
JS查找字符串中出现次数最多的字符
Sep 05 Javascript
基于bootstrap实现收缩导航条
Mar 17 Javascript
javascript+html5+css3自定义提示窗口
Jun 21 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
Sep 03 Javascript
Vue 实现列表动态添加和删除的两种方法小结
Sep 07 Javascript
vue-i18n结合Element-ui的配置方法
May 20 Javascript
使用typescript构建Vue应用的实现
Aug 26 Javascript
vue-router 路由传参用法实例分析
Mar 06 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
BBS(php &amp; mysql)完整版(二)
2006/10/09 PHP
PHP的ASP防火墙
2006/10/09 PHP
php+ajax制作无刷新留言板
2015/10/27 PHP
解决在laravel中leftjoin带条件查询没有返回右表为NULL的问题
2019/10/15 PHP
google 搜索框添加关键字实现代码
2010/04/24 Javascript
javascript预览上传图片发现的问题的解决方法
2010/11/25 Javascript
javascript写的简单的计算器,内容很多,方法实用,推荐
2011/12/29 Javascript
前台js改变Session的值(用ajax实现)
2012/12/28 Javascript
表格奇偶行设置不同颜色的核心JS代码
2013/12/24 Javascript
js读取csv文件并使用json显示出来
2015/01/09 Javascript
domReady的实现案例
2016/11/23 Javascript
详解使用JS如何制作简单的ASCII图与单极图
2017/03/31 Javascript
JS FormData上传文件的设置方法
2017/07/05 Javascript
nodejs中art-template模板语法的引入及冲突解决方案
2017/11/07 NodeJs
微信小程序获取手机号授权用户登录功能
2017/11/09 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
2017/12/12 Javascript
Node.js 使用axios读写influxDB的方法示例
2018/10/26 Javascript
微信小程序自定义toast弹窗效果的实现代码
2018/11/15 Javascript
微信小程序发布新版本时自动提示用户更新的方法
2019/06/07 Javascript
vue 实现购物车总价计算
2019/11/06 Javascript
原生JS实现汇率转换功能代码实例
2020/05/13 Javascript
jQuery-App输入框实现实时搜索
2020/11/19 jQuery
python中xrange和range的区别
2014/05/13 Python
python GUI库图形界面开发之PyQt5布局控件QHBoxLayout详细使用方法与实例
2020/03/06 Python
canvas里面如何基于随机点绘制一个多边形的方法
2018/06/13 HTML / CSS
泰国办公用品购物网站:OfficeMate
2018/02/04 全球购物
澳洲在线厨具商店:Kitchen Style
2018/05/05 全球购物
Crocs欧洲官网:Crocs Europe
2020/01/14 全球购物
财务经理的岗位职责
2013/12/17 职场文书
2014年社区居委会主任重阳节讲话稿
2014/09/25 职场文书
2014年银行工作总结范文
2014/11/12 职场文书
班主任2015新年寄语
2014/12/08 职场文书
项目验收申请报告
2015/05/15 职场文书
2015年评职称个人工作总结
2015/10/15 职场文书
Pandas数据类型之category的用法
2021/06/28 Python
CSS 左边固定宽右边自适应的6种方法
2022/05/15 HTML / CSS