实例详解JavaScript中setTimeout函数的执行顺序
作者:蓝蓝 时间:2024-04-22 13:25:09
前言
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);
代码十分简单,想必大家都能看懂,执行结果如下:
解释: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里的第二个参数)执行即可
来源:https://segmentfault.com/a/1190000010109751
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
关于python简单的爬虫操作(requests和etree)
![](https://img.aspxhome.com/file/2023/8/69568_0s.jpg)
javascript使用正则表达式检测IP地址
在一台服务器上安装两个或多个mysql的实现步骤
JavaScript数组去重的几种方法
Python 的Json 模块编码详解
Python数据分析之双色球基于线性回归算法预测下期中奖结果示例
![](https://img.aspxhome.com/file/2023/8/69578_0s.jpg)
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
![](https://img.aspxhome.com/file/2023/7/129857_0s.png)
python不使用for计算两组、多个矩形两两间的iou方式
![](https://img.aspxhome.com/file/2023/5/115465_0s.jpg)
pycharm远程连接服务器调试tensorflow无法加载问题
![](https://img.aspxhome.com/file/2023/1/130961_0s.png)
2008农历新年各大网站Logo秀
![](https://img.aspxhome.com/file/UploadPic/20082/11/200821117040777s.jpg)
ASP简单实现数字和字母验证码
IE下中英文字体不能对齐原因及解决
![](https://img.aspxhome.com/file/UploadPic/20088/11/2008811125353679s.jpg)
Python数据分析与处理(一)--北京高考分数线统计分析
![](https://img.aspxhome.com/file/2023/0/88970_0s.jpg)
详解Django将秒转换为xx天xx时xx分
使用Filter过滤python中的日志输出的实现方法
NopCommerce架构分析之(四)基于路由实现灵活的插件机制
keras实现theano和tensorflow训练的模型相互转换
![](https://img.aspxhome.com/file/2023/1/89081_0s.jpg)
Python通用验证码识别OCR库ddddocr的安装使用教程
![](https://img.aspxhome.com/file/2023/7/96987_0s.png)
php curl选项列表(超详细)
Python实现简单图像缩放与旋转
![](https://img.aspxhome.com/file/2023/8/92168_0s.png)