搜尋

首頁  >  文章  >  web前端  >  jQuery源碼之非同步機制的解析

jQuery源碼之非同步機制的解析

不言
不言原創
2018-07-09 15:26:581324瀏覽

這篇文章主要介紹了關於jQuery原始碼之非同步機制的解析，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

非同步機制

javascript編程往往伴隨著非同步編程，例如遠端獲取資料,大量的非同步編程會帶來許多的回調函數，js是單線程的，所以完成異步往往需要藉助瀏覽器事件驅動,這樣會讓我們的程式碼和算法變得支離破碎。 jQuery就提供了一個抽象的 非阻塞 解決方案: Deferred。

認識非同步

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

一、認識deferred物件

開發網站的過程中，我們常常遇到某些耗時很長的javascript操作。其中，既有異步的操作（例如ajax讀取伺服器資料），也有同步的操作（例如遍歷一個大型陣列），它們都不是立即能得到結果的。

通常的做法是，為它們指定回呼函數（callback）。即事先規定，一旦它們運行結束，應該呼叫哪些函數。

deferred物件是在jquery 1.5版本被引進來的，jquery在回呼方面的出處理不是很好，為此就誕生了deferred物件了。 deferred物件就是jQuery的回呼函數解決方案。在英文中，defer的意思是"延遲"，所以deferred物件的意思就是"延遲"到未來某個點再執行。

二、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方法。採用鍊式寫法以後，程式碼的可讀性大大提高。

三、指定相同運算的多個回呼函數

deferred物件的一大好處，就是它允許你自由加入多個回呼函數。

還是以上面的程式碼為例，如果ajax操作成功後，除了原來的回呼函數，我還想再運行一個回呼函數，怎麼辦？ 

$.ajax("test.html")

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

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

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

四、為多個運算指定回呼函數

deferred物件的另一個好處，就是它允許你為多個事件指定一個回呼函數，這是傳統寫法做不到的。那就是$.when()

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

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

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

五、普通操作的回調函數接口擴展

它把這套回調函數接口，從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("出错啦！"); });

六、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();// 这里会立即先执行一次

七、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("出错啦！"); });

八、$.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（延迟）对象的当前状态。

  1. "pending": Deferred对象是尚未完成状态 (不是 "rejected" 或 "resolved").

  2. "resolved": Deferred对象是在解决状态，这意味着，deferred.resolve() 或者 deferred.resolveWith()被对象访问和doneCallbacks被访问（或在被调用的过程中）

  3. "rejected": Deferred对象是在被拒绝的状态，这意味着，deferred.reject() 或者 deferred.rejectWith() 被对象访问和failCallbacks被访问（或在被调用的过程中） 。

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

十、使用实例

情景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;
      })
    })

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

以上是jQuery源碼之非同步機制的解析的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：jQuery源碼之資料緩衝的學習下一篇：jQuery源碼之資料緩衝的學習

相關文章

看更多