JavaScript异步

有这样一段代码:

function fn1(callback){

setTimeout(function () {

callback();

}, 1000);

}

这是一个异步编程的代码，刚开始的时候我一直绕不出来，何为异步？我想到了ajax的异步，但是还是没明白，查了很多讲解，越看越不明白，最后找到了任务队列和主线程，才明白了什么叫异步。

我们都知道JavaScript最大的特点就是单线程，单线程限制了任务必须排队，等待前面的任务执行完了才能下一个任务。这也叫同步，同步的意思就是必须等上一个任务执行完毕才能执行下一个任务。

alert(888);
while (true){
    alert(999);
};
alert(777);

在JavaScript线程中会先弹出888，然后一直循环弹出999，因为这个while一直占据着线程，777又必须等待上一个任务执行完毕，所以陷入了死循环，这就是同步。

同步就是这样，如果前一个任务耗时很长甚至是陷入循环，那么后一个任务不得不等着，于是一个任务队列的概念就出来了。比如我们在ajax操作的时候，我们不可能真的等请求回来了再执行另外的任务。

所以JavaScript把任务分成了两种，一种是同步任务，另一种是异步任务。同步任务就是在主线程上面排队执行，异步任务是不进入主线程，而是进入任务队列，当主线程从头到尾执行完毕之后，就会把任务队列的任务提到主线程，然后按同步任务的方式从头到尾执行。当再执行完毕之后，又会去任务队列再一次重复上面的操作，直到所有的任务执行完毕。

简单来说过程是这样的：

1、 主线程执行所有同步任务，形成一个执行栈；

2、 在主线程执行的过程中形成的异步任务，会进入任务队列；

3、 当执行栈中所有的同步任务队列执行完毕，任务队列自动进入执行栈，变成同步任务；再次期间形成的异步任务进入新的任务队列；

4、 主线程不断重复上面的步骤。

这就是JavaScript的运行机制，如下代码：

console.log( "1" );
setTimeout(function() {
    console.log( "2" )
}, 0 );
setTimeout(function() {
    console.log( "3" )
}, 1000 );
setTimeout(function() {
    console.log( "4" )
}, 2000 );
setTimeout(function() {
    console.log( "5" )
}, 3000 );
console.log( "6" );
//1 6 2 3 4 5

每隔一秒就会有一个任务队列，主线程执行完毕就会把任务队列变成主线程执行，直到没有任务。

异步其实挺简单的，可能本人刚开始进入了误区，理解异步可以让我们对于JavaScript的执行原理有一定的理解。

欢迎关注Coding个人笔记 公众号