JQuery日记6.5 Javascript异步模式（一）

理解力JQuery前实现异步队列,有必要理解javascript异步模式.

Javascript异步其实并不严重格异步感,js使某些片段异步方式在将来运行,流不必等待继续向下进行.

在多线程的语言中最easy想到的异步方式就是在当前线程中,新创建一个线程让某段代码片段执行在新创建的线程中,从而使当前线程继续向下进行.

而不论什么一本书关于js的书都会告诉我们js是执行在单线程里的,这个线程称为UI线程,从名字就知道这个线程不光用于执行js代码,还负责事件的处理和UI的绘制.

在游览器内部维护着一个事件队列,触发的事件会一个个的放进这个队列中,UI线程在空暇时会去查看这个队列,假设队列不为空,就取第一个事件并运行其监听函数.

for (var i = 0; i < 3; ++i) {
    setTimeout( function(){
         console.info( 'setTimeout: ' + i);
    }, 0);
    console.info( 'for循环: ' + i)
}

上面这段代码在UI线程的运行示意图图例如以下

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc29uZ3poZW5nXzc0MQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

首先将此段js代码放进UI线程中运行,当代码运行到setTimeout(fn, mills)时,游览器会在事件队列中放入此定时事件1,前面说过仅仅有当UI线程空暇时才会去运行定时事件,但此时js代码还在运行,所以继续for循环,i继续自增,而且继续放入定时事件2,3,当js代码片段运行完成后,才继续依次运行定时事件1、2、3,此时i的值已经是3了.所以在控制台中我们看到的打印结果依次是：setTimeout:1,setTimeout:2,setTimeout:3,for循环:3,for循环:3,for循环:3.

事实上这样看起来很类似与传统多线程的异步编程,代码运行流并不会等setTimeout的函数运行完成,再继续向下运行.但我们要了解的是,事实上它们仍然是串行运行的,仅仅只是是把setTimeout中设置的函数放到队列中延后运行,从而使js代码依旧先运行,运行完成后再依次运行事件队列中的性能.

版权声明：本文博主原创文章。博客，未经同意不得转载。