js同步和异步编程

js是单线程的：做着当前的这件事情，没有完成之前，绝不会做下一件事情

js中的两种编程思想：同步、异步

1.同步

上一件事情没有完成，继续处理上一件事情，只有上一件事情完成了，才会做下一件事情（js中大部分都是同步编程）

for(var i = 0;i<1000;i++){
if(i == 999){
console.log("循环结束！");
}
}
console.log("ok");
for循环就是同步编程的，只有循环结束后，才会继续执行下面代码

2.异步

规划要做一件事情，但是不是当前立马去执行这件事情，需要等待一定的时间，我们不会等着它执行，而是继续执行下面的操作，“只有当下面的事情都处理完成了，才会返回头处理之前的事情”，如果下面的事情并没处理完成，不管之前的事情有没有到时间，都得继续等待

2.1在js中异步编程只有四种情况

● 定时器

● 所有的事件绑定

● ajax读取数据

● 回调函数

2.1.1 定时器案例

例1：

var n = 0;
window.setTimeout(function(){
n++;
console.log(n);
},1000);
console.log(n); <span style="white-space:pre"> </span>//0 1
例2：

每一个浏览器对于定时器的等待时间都有一个最小的值，chrome：5~6ms，ie：10~13ms，如果设置的等待时间小于这个值，不起作用，还是需要等到最小时间才执行的，尤其是写0也不是立即执行

var n = 0;
window.setTimeout(function(){
n++;
console.log(n);
},<span style="background-color: rgb(255, 255, 0);">0</span>);
console.log(n); //0 1
例3：

定时器设置的等待时间不一定就是最后执行的时间，如果定时器之后还有其他的事情正在处理中，不管定时器的时间有没有到，都是不会执行定时器的

var n = 0;
window.setTimeout(function(){
n++;
console.log(n); //不执行
},0);
console.log(n); //0
while(1){ //死循环
n++;
}
console.log(n); //不执行
 

解析：任务队列池

 



var n = 0;
window.setTimeout(function(){
n += 2;
console.log(n); //7 (4)
},20); //在任务队列池中排在后面
window.setTimeout(function(){
n += 5;
console.log(n); //5 (3)
},5); //在任务队列池中排在前面
console.log(n); //0 (1)
for(var i=0;i<10000001000000;i++){
n++;
}
console.log(n); //0 (2)

2.1.2 事件绑定

var oLis = document.getElementsByTagName("li");
for(var i=0;i<oLis.length;i++){
oLis[i].onclick = function(){ //异步编程，不会等待，执行onclick时for循环已执行完
console.log(i);
};
(oLis[i].onclick = function(){ //改用此种方式才能达到效果（闭包，私有作用域方式）
console.log(i);
})(i);
}