理解javascript异步编程,javascript异步编程

来源:http://www.sh-fengwen.com 作者:瘦身美容 人气:64 发布时间:2019-09-04
摘要:这可能是个比较深的话题。何谓异步? 理解javascript异步编程,javascript异步编程 一、异步机制 JavaScript的执行环境是单线程的,单线程的好处是执行环境简单,不用去考虑诸如资源同步

这可能是个比较深的话题。何谓异步?

理解javascript异步编程,javascript异步编程

一、异步机制

JavaScript的执行环境是单线程的,单线程的好处是执行环境简单,不用去考虑诸如资源同步,死锁等多线程阻塞式编程等所需要面对的恼人的问题。但带来的坏处是当一个任务执行时间较长时,后面的任务会等待很长时间。在浏览器端就会出现浏览器假死,鼠标无法响应等情况。所以在浏览器端,耗时很长的操作都应该异步执行,避免浏览器失去响应。所谓异步执行,不同于同步执行(程序的执行顺序与任务的排列顺序是一致的、同步的),每一个任务有一个或多个回调函数(callback),前一个任务结束后,不是执行后一个任务,而是执行回调函数,后一个任务则是不等前一个任务结束就执行,所以程序的执行顺序与任务的排列顺序是不一致的、异步的。既然Javascript是单线程的,那它又如何能够异步的执行呢?

二、Javascript线程模型和事件驱动

JavaScript有一个基于事件循环的并发模式。这个模式与C语言和java有很大不同。

运行时的概念

图片 1


函数调用形成堆栈帧。

function f(b){
  var a = 12;
  return a+b+35;
}

function g(x){
  var m = 4;
  return f(m*x);
}

g(21);

当调用函数g时,创建第一个包含g参数和局部变量的帧。当g函数调用f函数时,创建包含f参数和局部变量第二个堆栈帧并推到第一个堆栈帧的顶部。当f返回时,顶部的堆栈帧元素被弹出(只留下g调用)。当g函数返回时,堆栈为空。


堆是一个大型的非结构化区域,对象被分配到堆中。
队列
一个javascript运行环境包含一个信息队列,这个队列是一系列将被执行的信息列表。每一个消息被关联到一个函数上。当堆栈为空时,从消息队列中取出一个消息并进行处理。该处理包含调用相关的函数(以及因此产生一个初始化的堆栈帧)。当堆栈再次为空时,消息处理结束。
事件循环

事件循环的名字源于它的实现,经常像下面这样:

while(queue.waitForMessage()){
 queue.processNextMessage();
}

queue.waitForMessage同步等待一个消息。

1、运行到完成
每个消息完全处理之后,其它消息才会被处理。这样的好处就是当一个函数不能被提前,只能等其他函数执行完毕(并且可以修改数据的函数操作)。这不同于C,例如,如果一个函数在一个线程运行时,它可以停在任何点运行在另一个线程一些其他的代码。这种模式的缺点是,如果一个消息时间过长完成,Web应用程序无法处理像点击或滚动的用户交互。该浏览器可缓解此与“脚本花费的时间太长运行”对话框。一个很好的做法,遵循的是使信息处理短,如果可能削减一个消息到几条消息。
2、添加消息
在网页浏览器中,事件可以在任何时候添加,一个事件发生并伴随事件监听绑定到事件上。如果没有事件监听,则事件丢失。就像点击一个元素,元素上绑定点击事件。调用setTimeout时,当函数的第二个参数时间被传递进去,将添加一个消息到队列中。如果在队列中没有其他消息,该消息被立即处理;然而,如果有消息,则setTimeout的信息将必须等待其它消息以进行处理。由于这个原因,第二个参数是最小的时间,而不是一个保证时间。
3、几个运行环境之间的通信 一个web worker或跨域iframe都有自己的堆栈,堆,和消息队列。两个不同的运行环境只能通过postMessage的方法发送消息进行通信。这种方法增加了一个消息到其他运行时,如果后者监听消息事件。
从不阻塞

事件循环模型是javascript的一个很有意思的属性,不像其它语言,它从不阻塞。假定浏览器中有一个专门用于事件调度的实例(该实例可以是一个线程,我们可以称之为事件分发线程event dispatch thread),该实例的工作就是一个不结束的循环,从事件队列中取出事件,处理所有很事件关联的回调函数(event handler)。注意回调函数是在Javascript的主线程中运行的,而非事件分发线程中,以保证事件处理不会发生阻塞。通过事件和回调的I/O操作是一个典型的表现,所以当应用等待索引型数据库查询返回或XHR请求返回时,它仍然可以处理其他事情比如用户输入。

三、回调

回调是javascript的基础,函数被作为参数进行传递。像下面:

f1();
f2();
f3();

如果f1中执行了大量的耗时操作,而且f2需要在f1之后执行。则程序可以改为回调的形式。如下:

function f1(callback){
  setTimeout(function () {
    // f1的大量耗时任务代码并的到三个结果i,l,you.
    console.log("this is function1");
    var i = "i", l = "love", y = "you";
    if (callback && typeof(callback) === "function") {
      callback(i,l,y);
    }
  }, 50);
}

function f2(a, b, c) {
  alert(a + " " + b + " " + c);
  console.log("this is function2");
}

function f3(){console.log("this is function3");}
f1(f2);
f3();

运行结果:

this is function3
this is function1
i love you
this is function2

采用这种方式,我们把同步操作变成了异步操作,f1不会堵塞程序运行,相当于先执行程序的主要逻辑,将耗时的操作推迟执行。
回调函数的优点是简单,轻量级(不需要额外的库)。缺点是各个部分之间高度耦合(Coupling),流程会很混乱,而且每个任务只能指定一个回调函数。某个操作需要经过多个非阻塞的IO操作,每一个结果都是通过回调,产生意大利面条式(spaghetti)的代码。

operation1(function(err, result) {
  operation2(function(err, result) {
    operation3(function(err, result) {
      operation4(function(err, result) {
        operation5(function(err, result) {
          // do something useful
        })
      })
    })
  })
})

四、事件监听

另一种思路是采用事件驱动模式。任务的执行不取决于代码的顺序,而取决于某个事件是否发生。

// plain, non-jQuery version of hooking up an event handler
var clickity = document.getElementById("clickity");
clickity.addEventListener("click", function (e) {
  //console log, since it's like ALL real world scenarios, amirite?
  console.log("Alas, someone is pressing my buttons…");
});

// the obligatory jQuery version
$("#clickity").on("click", function (e) {
  console.log("Alas, someone is pressing my buttons…");
});

也可以自定义事件进行监听,关于自定义事件,属于另外一部分的内容。这种方法的优点是比较容易理解,可以绑定多个事件,每个事件可以指定多个回调函数,而且可以"去耦合"(Decoupling),有利于实现模块化。缺点是整个程序都要变成事件驱动型,运行流程会变得很不清晰。

五、观察者模式

我们假定,存在一个"信号中心",某个任务执行完成,就向信号中心"发布"(publish)一个信号,其他任务可以向信号中心"订阅"(subscribe)这个信号,从而知道什么时候自己可以开始执行。这就叫做"发布/订阅模式"(publish-subscribe pattern),又称"观察者模式"(observer pattern)。

var pubsub = (function(){
  var q = {}
    topics = {},
    subUid = -1;
  //发布消息
  q.publish = function(topic, args) {
    if(!topics[topic]) {return;}
    var subs = topics[topic],
      len = subs.length;
    while(len--) {
      subs[len].func(topic, args);
    }
    return this;
  };
  //订阅事件
  q.subscribe = function(topic, func) {
    topics[topic] = topics[topic] ? topics[topic] : [];
    var token = (++subUid).toString();
    topics[topic].push({
      token : token,
      func : func
    });
    return token;
  };
  return q;
  //取消订阅就不写了,遍历topics,然后通过保存前面返回token,删除指定元素
})();
//触发的事件
var f2 = function(topics, data) {
  console.log("logging:" + topics + ":" + data);
  console.log("this is function2");
}

function f1(){
   setTimeout(function () {
      // f1的任务代码
      console.log("this is function1");
    //发布消息'done'
    pubsub .publish('done', 'hello world');
    }, 1000);
}
pubsub.subscribe('done', f2);
f1();

上面代码的运行结果为:

this is function1
logging:done:hello world
this is function2

观察者模式的实现方法有很多种,也可以直接借用第三方库。这种方法的性质与"事件监听"类似(观察者模式和自定义事件非常相似),但是明显优于后者。观察者模式和事件监听一样具有良好的去耦性,并且有一个消息中心,通过对消息中心的处理,可以良好地监控程序运行。

六、Promises对象

Promises的概念是由CommonJS小组的成员在 Promises/A规范 中提出来的。Promises被逐渐用作一种管理异步操作回调的方法,但出于它们的设计,它们远比那个有用得多。Promise允许我们以同步的方式写代码,同时给予我们代码的异步执行。

function f1(){
  var def = $.Deferred();
  setTimeout(function () {
    // f1的任务代码
    console.log("this is f1");
    def.resolve(); 
  }, 500);
  return def.promise();
}

function f2(){
  console.log("this is f2");
}

f1().then(f2);

上面代码的运行结果为:

this is f1
this is f2

上面引用的是jquery对Promises/A的实现,jquery中还有一系列方法,具体可参考:Deferred Object.关于Promises,强烈建议读一下You're Missing the Point of Promises.还有很多第三方库实现了Promises,如:Q、Bluebird、 mmDeferred 等。Promise(中文:承诺)其实为一个有限状态机,共有三种状态:pending(执行中)、fulfilled(执行成功)和rejected(执行失败)。其中pending为初始状态,fulfilled和rejected为结束状态(结束状态表示promise的生命周期已结束)。状态转换关系为:pending->fulfilled,pending->rejected。随着状态的转换将触发各种事件(如执行成功事件、执行失败事件等)。 下节具体讲述状态机实现js异步编程。

七、状态机

Promises的本质实际就是通过状态机来实现的,把异步操作与对象的状态改变挂钩,当异步操作结束的时候,发生相应的状态改变,由此再触发其他操作。这要比回调函数、事件监听、发布/订阅等解决方案,在逻辑上更合理,更易于降低代码的复杂度。关于Promises可参考:JS魔法堂:剖析源码理解Promises/A规范 。

八、ES6对异步的支持

这是一个新的技术,成为2015年的ECMAScript(ES6)标准的一部分。该技术的规范已经完成,但实施情况在不同的浏览器不同,在浏览器中的支持情况如下。

图片 2

var f1 = new Promise(function(resolve, reject) {
  setTimeout(function () {
    // f1的任务代码
    console.log("this is f1");
    resolve("Success");

  }, 500); 
});
function f2(val){
  console.log(val + ":" + "this is f2");
}
function f3(){
  console.log("this is f3")
}
f1.then(f2);
f3();

以上代码在Chrome 版本43中的运行结果为:

this is f3
this is f1
Success:this is f2

以上就是针对javascript异步编程的了解学习,之后还有相关文章进行分享,不要错过哦。

笼统地说,异步在javascript就是延时执行。严格来说,javascript中的异步编程能力都是由BOM与DOM提供的,如setTimeout,XMLHttpRequest,还有DOM的事件机制,还有HTML5新增加的webwork, postMessage,等等很多。这些东西都有一个共同的特点,就是拥有一个回调函数,实现控制反转。由于控制反转是更深奥的问题,这里不想展开。不过有点可以确认的,回调函数的存在打断了原来的执行流程,让它们自行在适当的时机出现并执行,这是个非常便捷的模式。对比主动式的轮询,你就知它多么节能。在同步编程,代码基本上自上向下执行,在异步编程,一些代码就要写到回调函数中,如果代码之间存在依赖,回调函数套回调函数的情况也不少见,这种套嵌结构对以后的维护来说简直是地狱。还有一种我们不得不面对的情况,try...catch无法捕捉几毫秒之后发生的异常。另外,除了setTimeout外,异步编程基本上由事件机制承担的,它们的回调函数什么时候发生基本上都是未知数,可能由于后台发生系统级错误,无法再发出响应,或者,系统忙碌,一时半刻响应不过来,这两种情况我们也必需提供一个策略,中断这操作,也就是所谓的abort,这些都是异步编程的所要处理的课题。

您可能感兴趣的文章:

  • javascript异步编程
  • Javascript异步编程的4种方法让你写出更出色的程序
  • JavaScript异步编程Promise模式的6个特性
  • Javascript异步编程模型Promise模式详细介绍
  • Javascript中的异步编程规范Promises/A详细介绍
  • 详谈nodejs异步编程
  • 跟我学习javascript解决异步编程异常方案
  • 再谈JavaScript异步编程

一、异步机制 JavaScript的执行环境是单线程的,单线程的好处是执行环境简单,不用去考虑诸如资...

$.post("/foo.json", function (dataOfFoo) {//多层套嵌结构的Ajax回调 

  $.post("/bar.json", function (dataOfBar) { 

    $.post("/baz.json", function (dataOfBaz) { 

      alert([dataOfFoo, dataOfBar, dataOfBaz]); 

    }); 

  }); 

});
function throwError(){ 

  throw new Error(ERROR); 

 

try{ 

  setTimeout(throwError, 3000); 

} catch(e){ 

  alert(e);//这里的异常无法捕获 

}

由于在javascript编程,随时都碰到这样的需求,因此实现相关轻捷的API是重中之重。正如上面所说,它只少要有以下功能,能储存一组回调函数(domReary,多投事件,特效),在特定时刻中执行所有回调函数,如果发生错误能触发相应的处理函数(负向回调),能中止整个操作,从中断处再起操作,如果要求更多,我们还想能从串行转向并行,由并行转入串行。可能有许多概念大家听不懂,是不是?但想弄个好的特效,这些都是必需的。如果玩过后端JS的人,一定听说过node.js,现在基本成为它的代名词了。路由派发,IO操作,都是异步的,事件驱动的,为了实现优雅的异步编程,大牛们忙得焦头烂额,一个个方案被提出来,如do.js. step.js, async.js, flow.js……,不是太鸡肋,就是无法应用于前端。因此我们需要一个适合于前端的方案。

有件事我们必需明白,你想到的,人家都早已研究过了,并且已给出解决方案。十大javascript框架之一,Mochikit,就从Python的Twisted库搞来Deferred,后来又给dojo学去,现在你们又看到,相同的东西又出现在jQuery1.5上了。不过,Mochikit的Deferred还有一个不为人知的分支,由日本大牛cho45搞出来(他同时也搞什么BigInt,跨浏览器Testing,名气紧随amachang、uupaa、edvakf、nanto之后),叫JSDeferred。先说dojo那派系的(包括jQuery)的Deferred,一直处于无敌状态,与Common.js搞出一套规范,什么promises,then,when都是那时制定,jQuer基本全盘接受。另一分支,cho45的JSDeferred,构思非常奇特,没有使用数组来装载回调函数,而是通过setTimeout,image.onload, postMessage等异步机制巧妙地把维护列队地工作道回浏览器自身,虽然有致命缺陷,但其易用性也被日本JS界所首肯,我的Deferred对象就从它的基本上发展过来的。Deferred这东西,我通常称之为异步列队,因为它们的确是需要两组由回调函接构成的队列,非常之形象。

在我们搬出异步列队之前,让我们看看普通的列队是怎么实现延迟的。

var Queue = function(){ 

      this.list = [] 

    } 

    Queue.prototype = { 

      constructor:Queue, 

      queue:function(fn) { 

        this.list.push(fn) 

        return this; 

      }, 

      dequeue:function(){ 

       var fn = this.list.shift()||function(){}; 

       fn.call(this) 

      } 

    }

这样调用它:

本文由美高梅游戏平台网站发布于瘦身美容,转载请注明出处:理解javascript异步编程,javascript异步编程

关键词:

最火资讯