码迷,mamicode.com
首页 > Web开发 > 详细

JS同步与异步;

时间:2018-12-11 11:20:46      阅读:209      评论:0      收藏:0      [点我收藏+]

标签:两种   timeout   同步   i++   执行   fun   同步异步   有一个   存在   

JS的同步与异步

同步:代买从上往下的执行

异步:每个模块各执行各的,同时执行,互不干扰

四个异步事件:(1)定时器(2)ajax(3)时间的绑定(4)回调函数

现在用定时器来说一说setTimeOut事件的同步和异步

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

以上函数的输出结果无非是两种:(1)0 1 2 3 4 5 5 (2)5 5 5 5 5 5 5

但是结果显然是第二种

首先看一下学习同步异步的方法:

同步优先、异步靠边、回调垫底

用公式表达就是:同步 => 异步 => 回调

然后就可以得知:

 1)for循环和循环体外部的console是同步的,所以先执行for循环,再执行外部的console.log。(同步优先)

 2)for循环里面有一个setTimeout回调,他是垫底的存在,只能最后执行。(回调垫底)

 那么,为什么我们最先输出的是5呢?

 这个也是非常好理解,for循环先执行,但是不会给setTimeout传参(回调垫底),等for循环执行完,就会给setTimeout传参,而外部的console打印出5是因为for循环执行完成了
那么解决的办法都有哪些呢?

(1)闭包

for (var i = 1; i <=20; i++){
(function (i) {
setTimeout(function timer() 

console.log(i);
}, i*1000)
})(i);
}
(2)把他的每个得索引值存到一个属性里

for (var i = 0; i < 5; i++) {
setTimeout(function() {

var i.index=i;
console.log(this);
}, 1000);
}
console.log(i);

可能解决的办法还有更多,持续更新吧...

 

JS同步与异步;

标签:两种   timeout   同步   i++   执行   fun   同步异步   有一个   存在   

原文地址:https://www.cnblogs.com/qinlinkun/p/10100256.html

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