JS 同步与异步编程

JS同步与异步编程

JS是单线程的, js就是个傻子, 脑子一根筋, 做着当前的这件事情, 没有完成之前绝不会做下一件事情

JS中的两种编程思想

同步

上一件事情没有完成, 继续处理上一件事情, 只有上一件事情完成了, 才会做另一件事情(JS中大部分都是同步编程的)

for(var i = 0; i < 10000; i ++){
    if  i == 9999(){
        console.log("循环结束了~~")
    }
    console.log("ok")
}

-> 循环结束了~~
-> ok

for循环就是同步编程的, 只有循环结束后, 才会继续执行下面的代码

while(1){

}
console.log("ok")

永远都不会执行 console.log("ok"), 因为上面的循环是死循环, 永远都不会结束

异步

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

实现方法

在JS中异步编程只有四种情况:

定时器都是异步编程的
所有的事件都是异步编程的
Ajax读取数据的时候, 我们一般都设置为异步编程
回调函数也都是异步编程的

定时器

var n = 0;
window.setTimeout(function(){
    n++;
    console.log(n);
}, 1000);
console.log(n);

-> 0
-> 1

不立即执行

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

var n = 0;
window.setTimeout(function(){
    n++;
    console.log(n);
}, 0);
console.log(n);

-> 0
-> 1

不保证准确的执行时间

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

var n = 0;
window.setTimeout(function(){
    n++;
    console.log(n);
}, 0);
console.log(n);
while(1){
    n++
}
console.log(n)

-> 0
进入死循环, 浏览器卡死

任务队列

var n = 0;
window.setTimeout(function (){
    n += 2;
    console.log(n)
}, 2);

window.setTimeout(function (){
    n += 5;
    console.log(n)
}, 1);

console.log(n);
for(var i =0; i < 10000000; i++){
    
}
console.log(n);

-> 0
-> 0
-> 5
-> 7

任务队列

任务队列池

任务 -> 2ms执行

将任务->1ms执行添加到队列池中, 发现时间更短的在任务队列中提前排列

任务 -> 1ms执行
任务 -> 2ms执行

执行区

var n = 0;
console.log(n); ->0
执行一千万次的循环, 可能消耗的时间大于20ms也可能小于20ms
console.log(n) -> 0
此时的立即执行的任务都完成了

返回头
开始按照任务池中的任务队列的顺序开始从上到下执行.

事件

for(var i=0; i<oLis.length;i++){
    oLis[i].onclick = function(){
        console.log(i);
    }
}

-> 3
-> 3
-> 3

用户点击的时候, 循环已经执行完了, i已经变成了3.