jQuery 源码学习（五）异步机制

时间 2020-01-03

原文原文链接

异步机制

javascript编程每每会伴随着异步编程，好比远程获取数据,大量的异步编程会带来许多的回调函数，js是单线程的，因此完成异步每每须要借助浏览器事件驱动,这样会让咱们的代码和算法变得支离破碎。jQuery就提供了一个抽象的 非阻塞 解决方案: Deferred。javascript

认识异步php

alert(1)
setTimeout(function(){
    alert(2)
},0)
alert(3)
//alert(1) 
//alert(3)
//alert(2)

1、认识 `deferred`对象

开发网站的过程当中，咱们常常遇到某些耗时很长的javascript操做。其中，既有异步的操做（好比ajax读取服务器数据），也有同步的操做（好比遍历一个大型数组），它们都不是当即能获得结果的。html

一般的作法是，为它们指定回调函数（callback）。即事先规定，一旦它们运行结束，应该调用哪些函数。java

deferred对象是在jquery 1.5版本被引进来的，jquery在回调方面的出处理不是很好，为此就诞生了deferred对象了。deferred对象就是jQuery的回调函数解决方案。在英语中，defer的意思是"延迟"，因此deferred对象的含义就是"延迟"到将来某个点再执行。jquery

2、ajax的链式操做

最开始写法是：ajax

// < 1.5
$.ajax({

　　　　url: "test.html",

　　　　success: function(){
　　　　　　alert("哈哈，成功了！");
　　　　},

　　　　error:function(){
　　　　　　alert("出错啦！");
　　　　}

　　});

若是jquery的版本是1.5如下的，那么返回的是XHR对象，因此无法链式操做，可是高于1.5的版本的话，返回的是Deferred对象,能够进行链式操做。算法

// >=1.5
$.ajax("test.html")
    .done(function(){
        
    })
    .fail(function(){
        
    })

done()至关于success方法，fail()至关于error方法。采用链式写法之后，代码的可读性大大提升。编程

3、指定同一操做的多个回调函数

deferred对象的一大好处，就是它容许你自由添加多个回调函数。数组

仍是以上面的代码为例，若是ajax操做成功后，除了原来的回调函数，我还想再运行一个回调函数，怎么办？promise

$.ajax("test.html")

　　.done(function(){ alert("哈哈，成功了！");} )

　　.fail(function(){ alert("出错啦！"); } )

　　.done(function(){ alert("第二个回调函数！");} );

4、为多个操做指定回调函数

deferred对象的另外一大好处，就是它容许你为多个事件指定一个回调函数，这是传统写法作不到的。那就是$.when()

$.when($.ajax("test1.html"), $.ajax("test2.html"))

　　.done(function(){ alert("哈哈，成功了！"); })

　　.fail(function(){ alert("出错啦！"); });
//$.ajax("test1.html")和$.ajax("test2.html")，若是都成功了，就运行done()指定的回调函数；若是有一个失败或都失败了，就执行fail()指定的回调函数。

5、普通操做的回调函数接口扩展

它把这一套回调函数接口，从ajax操做扩展到了全部操做。也就是说，任何一个操做----不论是ajax操做仍是本地操做，也不论是异步操做仍是同步操做----均可以使用deferred对象的各类方法，指定回调函数。

// 一个耗时操做
var wait = function(){
    var task = function(){
        alert('执行了');
    };
    setTimeout(5000);
}

咱们为其添加回调,可能会想到$.when();

$.when(wait())

　　.done(function(){ alert("哈哈，成功了！"); })

　　.fail(function(){ alert("出错啦！"); });

可是没起到效果，done当即执行，缘由是$.when()接受的是一个deferred对象。因此咱们进一步改进吧

var dtd = $.Deferred();
var wait = function(){
    var task = function(){
        alert('执行了');
        dtd.resolve(); // 改变deferred对象的执行状态
    };
    setTimeout(task, 5000);

    return dd;
}

这样wait()返回的是一个defferred对象了，这就能够上链式操做了。

$.when(wait())

　　.done(function(){ alert("哈哈，成功了！"); })

　　.fail(function(){ alert("出错啦！"); });

6、defferred.resolve() 和 defferred.reject()

deferred采用的是Promise的原理。这里咱们要清楚一个执行状态的概念。在defferred对象中，有着三种状态，未完成 已完成 已失败

若是执行状态是"已完成"（resolved）,deferred对象马上调用done()方法指定的回调函数；
若是执行状态是"已失败"，调用fail()方法指定的回调函数；
若是执行状态是"未完成"，则继续等待，或者调用progress()方法指定的回调函数（jQuery1.7版本添加）。

defferred.resolve()是将状态从未完成变为已完成。 ==> done()
defferred.reject()是将状态从未完成变为了已失败。 ==> fail()

var dtd = $.Deferred(); // 新建一个Deferred对象
    var wait = function(){

　　　　var tasks = function(){

　　　　　　alert("执行完毕！");

　　　　　　dtd.resolve(); // 改变Deferred对象的执行状态

　　　　};

　　　　setTimeout(tasks,5000);

　　　　return dtd; // 返回promise对象

　　};



　　$.when(wait())

　　.done(function(){ alert("哈哈，成功了！"); })

　　.fail(function(){ alert("出错啦！"); });

　　dtd.resolve();// 这里会当即先执行一次

7、defferred.promise();

上面的方法是存在一些问题的，好比dtd是一个全局变量，他能够在外部被随时该边状态，这样就会使得done()或者fail()执行不仅有一次。

这显然不是咱们想要的，因此咱们就须要defferred.promise的帮忙了。

它的做用是，在原来的deferred对象上返回另外一个deferred对象，后者只开放与改变执行状态无关的方法（好比done()方法和fail()方法），屏蔽与改变执行状态有关的方法（好比resolve()方法和reject()方法），从而使得执行状态不能被改变。

var wait = function(dtd){

　　　　var dtd = $.Deferred(); //在函数内部，新建一个Deferred对象

　　　　var tasks = function(){

　　　　　　alert("执行完毕！");

　　　　　　dtd.resolve(); // 改变Deferred对象的执行状态

　　　　};

　　　　setTimeout(tasks,5000);

　　　　return dtd.promise(); // 返回promise对象

　　};

    var dd = wait();
    // dd.resolve(); // 这里若是使用了的话，就会报错的哦，由于返回deferred.promise（）是没法对状态修改的哦
　　$.when(dd)

　　.done(function(){ alert("哈哈，成功了！"); })

　　.fail(function(){ alert("出错啦！"); });

8、$.Defferred(wait)

另外一种防止执行状态改变的方法是使用$.Defferred()

var dtd = $.Deferred(); // 新建一个Deferred对象

　　var wait = function(dtd){

　　　　var tasks = function(){

　　　　　　alert("执行完毕！");

　　　　　　dtd.resolve(); // 改变Deferred对象的执行状态

　　　　};

　　　　setTimeout(tasks,5000);

　　　　return dtd;

　　};
var ddd = wait();
// dd.resolve(); //这里报错了哦
$.Deferred(dd)

　　.done(function(){ alert("哈哈，成功了！"); })

　　.fail(function(){ alert("出错啦！"); });

9、defferred对象小结

$.Deferred() 生成一个deferred对象。
deferred.done() 指定操做成功时的回调函数
deferred.fail() 指定操做失败时的回调函数
deferred.promise() 没有参数时，返回一个新的deferred对象，该对象的运行状态没法被改变；接受参数时，做用为在参数对象上部署deferred接口。
deferred.resolve(args) 手动改变deferred对象的运行状态为"已完成"，从而当即触发done()方法。解决Deferred（延迟）对象，并根据给定的args参数调用任何完成回调函数（doneCallbacks）。
deferred.resolveWith() 解决Deferred（延迟）对象，并根据给定的 context和args参数调用任何完成回调函数（doneCallbacks）。
deferred.reject(args) 这个方法与deferred.resolve()正好相反，调用后将deferred对象的运行状态变为"已失败"，从而当即触发fail()方法。拒绝Deferred（延迟）对象，并根据给定的args参数调用任何失败回调函数（failCallbacks）。这里的args是一个对象。
deferred.rejectWith(context, args) 拒绝Deferred（延迟）对象，并根据给定的 context和args参数调用任何失败回调函数（failCallbacks）。这里的args是一个数组类型。
$.when() 为多个操做指定回调函数。除了这些方法之外，deferred对象还有二个重要方法，上面的教程中没有涉及到。Context（上下文）做为 this对象传递给失败回调函数（failCallbacks ）
deferred.then()

有时为了省事，能够把done()和fail()合在一块儿写，这就是then()方法。

$.when($.ajax( "/main.php" ))

　　.then(successFunc, failureFunc );

若是then()有两个参数，那么第一个参数是done()方法的回调函数，第二个参数是fail()方法的回调方法。若是then()只有一个参数，那么等同于done()。

deferred.always() 这个方法也是用来指定回调函数的，它的做用是，无论调用的 deferred.resolve()还`是deferred.reject()，最后老是执行。

$.ajax( "test.html" )

　　.always( function() { alert("已执行！");} );

deferred.state() 肯定一个Deferred（延迟）对象的当前状态。

"pending": Deferred对象是还没有完成状态 (不是 "rejected" 或 "resolved").
"resolved": Deferred对象是在解决状态，这意味着，deferred.resolve() 或者 deferred.resolveWith()被对象访问和doneCallbacks被访问（或在被调用的过程当中）
"rejected": Deferred对象是在被拒绝的状态，这意味着，deferred.reject() 或者 deferred.rejectWith() 被对象访问和failCallbacks被访问（或在被调用的过程当中）。

这种方法主要是用在调试，例如，在准备拒绝（reject）一个延迟对象前，判断它是否已经处于 resolved 状态。

10、使用实例

情景1：当用户按下删除弹窗的肯定或取消后，把弹窗隐藏，并执行对应的操做（删除或不执行），由于咱们不知道用户何时会点击按钮，因此不能让弹窗阻塞其余任务的执行。

function pop(arg) {
      if (!arg) {
        console.error('pop title is empty');
      }
      var dfd = $.Deferred() //实例化一个延迟对象 
        ,
        confirmed //记录按下肯定或取消 
        , $confirm = $content.find('button.confirm') //确认按钮 
        ,
        $cancel = $content.find('button.cancel'); //取消按钮 

      //定时器轮询，当按下肯定或取消时触发删除或取消操做 
      timer = setInterval(function() {
        if (confirmed !== undifined) {
          dfd.resolve(confirmed);
          clearInterval(timer);
          dismiss_pop();
        }
      }, 50);
      //点击肯定时更改confirmed状态 
      $confirm.on('click', function() {
        confirmed = true;
      });
      //点击取消时更改confirmed状态 
      $cancel.on('click', function() {
        confirmed = false;
      }); //返回dfd对象
      return dfd.promise();
    }
    $('.delete').click(function() {
      var $this = $(this);
      var index = $this.data('index');
      //当前的id //肯定删除
      pop('肯定删除？').then(function(res) {
        res ? delete_task(index) : null;
      })
    })

参考文献

阮一峰的defferred理解

allenm

jQuery 源码学习 （五） 异步机制