JQuery日记6.5 Javascript异步模型(一)

在了解JQuery的异步队列实现之前,有必要去了解javascript的异步模型.

Javascript的异步其实并不算严格意义上的异步,js的异步是指让某段代码片段在将来再执行,而不是让执行流不必等待继续向下进行.

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

而任何一本书关于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线程的执行示意图图如下

首先将此段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代码依然先执行,执行完毕后再依次执行事件队列中的函数.

JQuery日记6.5 Javascript异步模型(一)

时间: 2024-10-12 20:39:41

JQuery日记6.5 Javascript异步模型(一)的相关文章

JQuery日记6.5 Javascript异步模型(二)

mnesia在频繁操作数据的过程可能会报错:** WARNING ** Mnesia is overloaded: {dump_log, write_threshold},可以看出,mnesia应该是过载了.这个警告在mnesia dump操作会发生这个问题,表类型为disc_only_copies .disc_copies都可能会发生. 如何重现这个问题,例子的场景是多个进程同时在不断地mnesia:dirty_write/2 mnesia过载分析 1.抛出警告是在mnesia 增加dump

JQuery日记6.5 Javascript异步模式(一)

理解力JQuery前实现异步队列,有必要理解javascript异步模式. Javascript异步其实并不严重格异步感,js使某些片段异步方式在将来运行,流不必等待继续向下进行. 在多线程的语言中最easy想到的异步方式就是在当前线程中,新创建一个线程让某段代码片段执行在新创建的线程中,从而使当前线程继续向下进行. 而不论什么一本书关于js的书都会告诉我们js是执行在单线程里的,这个线程称为UI线程,从名字就知道这个线程不光用于执行js代码,还负责事件的处理和UI的绘制. 在游览器内部维护着一

JavaScript异步编程设计快速响应的网络应用

JavaScript已然成为了多媒体.多任务.多内核网络世界中的一种单线程语言.其利用事件模型处理异步触发任务的行为成就了JavaScript作为开发语言的利器.如何深入理解和掌握JavaScript异步编程变得尤为重要!!!<JavaScript异步编程设计快速响应的网络应用>提供了一些方法和灵感. 一.深入理解JavaScript事件 1. 事件的调度 JavaScript事件处理器在线程空闲之前不会运行(空闲时运行). var start = new Date(); setTimeout

JavaScript异步编程(2)- 先驱者:jsDeferred

原文出处: linkFly   欢迎分享原创到伯乐头条 JavaScript当前有众多实现异步编程的方式,最为耀眼的就是ECMAScript 6规范中的Promise对象,它来自于CommonJS小组的努力:Promise/A+规范. 研究javascript的异步编程,jsDeferred也是有必要探索的:因为Promise/A+规范的制定基本上是奠定在jsDeferred上,它是javascript异步编程中里程碑式的作品.jsDeferred自身的实现也是非常有意思的. 本文将探讨项目js

js异步模型

前言:虽然关于js异步模型的文章已经是相当多,前端们对其也都是有各自的理解.本文的目的是梳理一下我对js异步模型的理解,以及希望给其他前端在这方面提供一个参考.本文只讲js异步模型,下一篇文章再去扯promise/a标准,jquery的promise和deferred对象.本文主要说的是浏览器端的js异步.下面罗列一下关于这方面的资料:JavaScript异步编程:设计快速响应的网络应用(这本书是为数不多专门讲js异步的书),别人写的关于js异步的文章(js异步编程1,js异步编程2),浏览器内

JavaScript异步交互

JavaScript 异步编程简介 回调函数和异步执行 所谓的异步指的是函数的调用并不直接返回执行的结果,而往往是通过回调函数异步的执行. 我们先看看回调函数是什么: var fn = function(callback) { // do something here ... callback.apply(this, para); }: var mycallback = function(parameter) { // do someting in customer callback }: //

javascript异步处理

大家知道javascript中有多少方法能够实现异步处理吗?setTimeout(),setInterval()是最常用的两个.XMLHttpRequest对象,进行ajax请求时.postMessage()进行跨域操作时.WebWorker创建新的线程时.setImmediate方法(新的setTimeout方法).requestAnimationFrame进行动画操作时.这些东西都有一个共同的特点,就是拥有一个回调函数.有的异步API还提供了相对应的中断API,比如:clearTimeout

JavaScript 异步编程

JavaScript 异步编程 第一章 深入理解JavaScript事件 1. javascirpt一般是单线程执行,setTimeout 和 setInterval 仅当cpu空闲时执行. var start = new Date; setTimeout(function(){ var end = new Date; console.log('Time elapsed:', end - start, 'ms'); }, 500); while (new Date - start < 1000)

第二十九课:javascript异步处理

大家知道javascript中有多少方法能够实现异步处理吗?setTimeout(),setInterval()是最常用的两个.XMLHttpRequest对象,进行ajax请求时.postMessage()进行跨域操作时.WebWorker创建新的线程时.setImmediate方法(新的setTimeout方法).requestAnimationFrame进行动画操作时.这些东西都有一个共同的特点,就是拥有一个回调函数.有的异步API还提供了相对应的中断API,比如:clearTimeout