码迷,mamicode.com
首页 > 编程语言 > 详细

javaScript中的同步,异步与回调函数

时间:2017-11-01 18:53:01      阅读:160      评论:0      收藏:0      [点我收藏+]

标签:strong   如何   function   img   调用   pre   网络日志   完成   存在   

for (var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(‘i: ‘,i);
    }, 1000);
}
 
console.log(i);

输出结果:

//输出
5
i:  5
i:  5
i:  5
i:  5
i:  5

记住我们的口诀,同步=>异步=>回调

 

1、for循环和循环体外部的console是同步的,所以先执行for循环,再执行外部的console.log。(同步优先)
 
2、for循环里面有一个setTimeout回调,他是垫底的存在,只能最后执行。(回调垫底)
那么,为什么我们最先输出的是5呢?
 
非常好理解,for循环先执行,但是不会给setTimeout传参(回调垫底),
等for循环执行完,就会给setTimeout传参,而外部的console打印出5是因为for循环执行完成了。
 
这里涉及到JavaScript执行栈和消息队列的概念,概念的详细解释可以看阮老师的 JavaScript 运行机制详解:再谈Event Loop – 阮一峰的网络日志,或者看 并发模型与Event Loop。
 
技术分享

 

 javaScript单线程如何处理回调呢?
javaScript同步的代码是在堆栈中顺序执行的。而setTimeout回调会先放到消息队列,for循环每执行一次,就会
放一个setTimeout到消息队列中,排队等候,当同步代码执行完了,再去调用消息队列中的回调方法。
 
在这个经典例子中,也就是说,先执行for循环,按顺序放了5个setTimeout回调到消息队列,然后for循环结束,下面还有一个同步的console,执行完console之后,堆栈中已经没有同步的代码了,就去消息队列找,发现找到了5个setTimeout,注意setTimeout是有顺序的。
 
那么,setTimeout既然在最后才执行,那么他输出的i又是什么呢?答案就是5。。有人说不是废话吗?
 
现在告诉大家为什么setTimeout全都是5,JavaScript在把setTimeout放到消息队列的过程中,循环的i是不会及时保存进去的,相当于你写了一个异步的方法,但是ajax的结果还没返回,只能等到返回之后才能传参到异步函数中。
在这里也是一样,for循环结束之后,因为i是用var定义的,所以var是全局变量(这里没有函数,如果有就是函数内部的变量),这个时候的i是5,从外部的console输出结果就可以知道。那么当执行setTimeout的时候,由于全局变量的i已经是5了,所以传入setTimeout中的每个参数都是5。
 

 

javaScript中的同步,异步与回调函数

标签:strong   如何   function   img   调用   pre   网络日志   完成   存在   

原文地址:http://www.cnblogs.com/qianxunpu/p/7767706.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!