你不知道的Javascript:有趣的setTimeout

有时候,小小的细节往往隐藏着大大的智慧

今天在回顾JavaScript进阶用法的时候,发现一个有趣的问题,话不多说,先上代码:

for(var j=0;j<10;j++){
  setTimeout(function(){console.log(i)},5000)
}

看到这三行代码,也许你会不耐烦道:又要讲闭包?要吐了好么?别急,让我们先来思考一下,这段代码在浏览器中的执行结果是什么?

  • 甲:顺序打印0到9?
  • 乙:这题我见过,打印十个10!

哪个答案正确?我们继续上图:

执行结果显示,浏览器打印出了十个10(因为图片处理的原因,按下回车到打印之前其实间隔了5秒左右),貌似乙胜出了。但如果你足够细心,你会发现几个问题:

  1. 为什么会循环打印十个10而不是0到9?
  2. 从结果来看,for循环执行完跳出之后,才开始执行setTimeout(所以j才等于10),为什么不是每次迭代都执行一次setTimeout呢?

如果上述两个问题你都能回答上来,恭喜你,你已经开始掌握了JavaScript深层次的知识,如果不能,那就乖乖往下看吧!

为什么会循环打印十个10

许多人习惯用第二个问题中的执行结果来回答这个问题:for循环执行完跳出之后,才开始执行setTimeout,所以才打印了十个10。这样的答案,只能说是既应付了自己,又应付了别人。其实,要解答第一个问题,首先要解答的就是第二个问题。

为什么不是每次迭代都执行一次setTimeout

大家都知道,JavaScript在ES6出现以前,是没有块状作用域的,这就意味着, 在for循环中用var定义的变量j,其实是属于全局的,即在全局范围内都可以被访问到,既然如此,那其实整个全局作用域中就只有一个j,每次for循环都是在更新这个j

那么现在关键的问题在于,为什么整个for循环会先于setTimeout执行,而不是我们正常理解的,一次迭代执行一次。

这就涉及到了JavaScript的核心特性:单线程

JavaScript设计的初衷,是浏览器用来与用户进行交互和DOM操作的。这就决定了它必须是单线程的,设想JavaScript同事有两个线程,一个线程在DOM节点添加内容,一个线程删除该节点,浏览器就会出现混乱。所以,为了避免复杂性,从一诞生,JavaScript就是单线程,这已经成了这门语言的核心特征,将来也不会改变。

单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。如果前一个任务耗时很长,后一个任务就不得不一直等着。

为了优化单线程的性能,JavaScript将任务分成两种,一种是同步任务(synchronous),另一种是异步任务(asynchronous)

  • 同步任务指的是,在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务.
  • 异步任务指的是,不进入主线程,而进入任务队列(task queue)的任务,只有主线程中的同步任务执行完毕,异步任务才会进入执行队列执行。只要主线程空了,就会去读取"任务队列",这就是JavaScript的运行机制。这个过程会不断重复。

setTimeout,就被JavaScript定义为异步任务。每次for循环的迭代,都将setTimeout中的回调函数加入任务队列等待执行。也就是说,只有同步任务中的for循环完全结束,主线程中才会去任务队列中找到尚未执行的十个setTimeout(十次迭代)回调函数并顺序执行(先进先出)。而此时,i已经经过循环结束变成了10,所以,此时主线程执行的,是十个一模一样的打印j的回调函数,即打印十个10。至此就完美回答了第一和第二个问题。文章开头的代码与下面的代码其实是等价的:

for(var i=0;i<10;i++){}
setTimeout(console.log(i),5000)
setTimeout(console.log(i),5000)
setTimeout(console.log(i),5000)
setTimeout(console.log(i),5000)
setTimeout(console.log(i),5000)
setTimeout(console.log(i),5000)
setTimeout(console.log(i),5000)
setTimeout(console.log(i),5000)
setTimeout(console.log(i),5000)
setTimeout(console.log(i),5000)

小小的一个setTimeout,牵扯出了很多JavaScript的深层次问题,虽然总结成一篇文章只有区区数百字,但是我在成文的过程中查阅了大量的资料,也做了许多实验。

最后,给出一个很小但是仍然在困扰我的一个问题,希望有兴趣的小伙伴可以跟我一起研究:

setTimeout(function(){while(true){}},6000);
setTimeout(function(){console.log(1)},10000);
setTimeout(function(){console.log(2)},5000);

上述代码的执行顺序是怎样的?setTimeout的定时,是定时插入执行栈之后立即执行,还是立即插入执行栈定时执行?

期待大家的留言。

原文发布于微信公众号 - 司想君(sxjsaylife)

原文发表时间:2018-01-31

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Windows Community

Windows Community Toolkit 4.0 - DataGrid - Part03

在上面一篇 Windows Community Toolkit 4.0 - DataGrid - Part02 中,我们针对 DataGrid 控件的 Util...

552
来自专栏进击的君君的前端之路

Vue成神之路之选项

vue.js——开发版本:包含完整的警告和调试模式 vue.min.js——生产版本:删除了警告,进行了压缩

1264
来自专栏Java技术分享

Java基础常见英语词汇

Java基础常见英语词汇(共70个) OO:object-oriented ,面向对象 OOP: object-oriented programming,...

5027
来自专栏梧雨北辰的开发录

iOS面试知识总结之代码片段

凡经历过iOS面试的我们总会发觉,即使实际开发中做过许多项目,也难免为一个普通的面试题受挫。这也许不是因为我们技术不过关,而是因为在平时我们忽略了怎样将用到的知...

2896
来自专栏我的博客

UBB原理-用于替换部分html标签

ubb这种代码正则表达式来进行匹配,不同的论坛所使用的UBB代码很可能不同,不能一概而论。UBB代码的出现,使得论坛可以使用类似HTML的标签来增加文字的属性,...

3156
来自专栏前端迷

这一次,彻底弄懂 JavaScript 执行机制

本文的目的就是要保证你彻底弄懂javascript的执行机制,如果读完本文还不懂,可以揍我。

1512
来自专栏TungHsu

这或许是对小白最友好的python入门了吧——21,导入模块

前边我们提到了定义函数,我们也说过了,定义函数可以让下边引用函数更加方便,“下边”可能还和我们定义函数的代码不在一个文件中,这个时候我们就需要导入函数了。 我们...

3475
来自专栏编程

Python之路-day4

#读取文件内容 withopen("readme.txt")asmyFile: content = myFile.readlines() print(conte...

1856
来自专栏游戏开发那些事

【随笔】android开发的学习路线

第一阶段:Java面向对象编程 1.Java基本数据类型与表达式,分支循环。  2.String和StringBuffer的使用、正则表达式。  3.面向对象...

1313
来自专栏前端新视界

CSS 预处理器中的循环

本文由 nzbin 翻译,黄利民 校稿。未经许可,禁止转载! 英文出处:Loops in CSS Preprocessors 发表地址:http://we...

2286

扫码关注云+社区

领取腾讯云代金券