前言
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里的第二个参数)执行即可
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对小牛知识库的支持。
本文向大家介绍setTimeout和Promise的执行顺序?相关面试题,主要包含被问及setTimeout和Promise的执行顺序?时的应答技巧和注意事项,需要的朋友参考一下 参考回答: 首先我们来看这样一道题: 输出答案为2 10 3 5 4 1 要先弄清楚settimeout(fun,0)何时执行,promise何时执行,then何时执行 settimeout这种异步操作的回调,只有主线程
本文向大家介绍ES6中的箭头函数实例详解,包括了ES6中的箭头函数实例详解的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了ES6中的箭头函数。分享给大家供大家参考,具体如下: 语法 我们先来看看箭头函数的语法: param 是参数,根据参数个数不同,分这几种情况: 示例 我们再来看看一些示例,看看在ES5中的函数怎么通过ES6中的箭头函数来替代吧: 当然,也可以定义多个参数: 当然=>后面
问题内容: 指令功能的执行顺序是什么?该文档似乎没有解决此问题。 防爆 template / templateUrl(已评估) 控制器 编译 链接 从下面的答案中:http ://plnkr.co/edit/79iyKSbfxgkzk2Pivuak(插件显示嵌套和兄弟指令) 模板被解析 (在编译中对模板所做的更改会扩展到链接功能) 问题答案: 预链接功能:在链接子元素之前执行。执行DOM转换并不安
本文向大家介绍对python中的try、except、finally 执行顺序详解,包括了对python中的try、except、finally 执行顺序详解的使用技巧和注意事项,需要的朋友参考一下 如下所示: 输出: 在 try 中 raise一个异常,就立刻转入 except 中执行,在except 中遇到 return 时,就强制转到 finally 中执行, 在 finally 中遇到 r
本文向大家介绍javascript 中的继承实例详解,包括了javascript 中的继承实例详解的使用技巧和注意事项,需要的朋友参考一下 javascript 中的继承实例详解 阅读目录 原型链继承 借用构造函数 组合继承 寄生组合式继承 后记 继承有两种方式:接口继承和实现继承。接口继承只继承方法签名,而实现继承则继承实际的方法。 由于函数没有签名,在ECMAScript中无法实现接口继承。E
本文向大家介绍Vue中util的工具函数实例详解,包括了Vue中util的工具函数实例详解的使用技巧和注意事项,需要的朋友参考一下 Vue中util的工具函数,下面通过实例代码给大家介绍的非常详细,具体代码如下所示: 总结 以上所述是小编给大家介绍的Vue中util的工具函数实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对呐喊教程网站的支持!