検索

ホームページ  >  記事  >  ウェブフロントエンド  >  jQueryソースコードの非同期機構の解析

jQueryソースコードの非同期機構の解析

不言
不言オリジナル
2018-07-09 15:26:581324ブラウズ

この記事では、jQuery ソース コードの非同期メカニズムの分析を主に紹介します。これには、特定の参考値があります。必要な友人は、それを参照してください。

非同期メカニズム

JavaScript プログラミングには、多くの場合、非同期プログラミングが伴います。など。データをリモートで取得するには、大量の非同期プログラミングが多くのコールバック関数をもたらします。JS はシングルスレッドであるため、非同期操作を完了するにはブラウザー イベント ドライバーの使用が必要になることが多く、これによりコードとアルゴリズムが断片化されます。 jQuery は、抽象的な ノンブロッキング ソリューション、Deferred を提供します。

非阻塞 解决方案: 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()是将状态从未完成变为了已失败非同期について理解する

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

1. deferred オブジェクトを理解する

Web サイトの開発プロセスでは、長時間かかる特定の JavaScript 操作に遭遇することがよくあります。その中には、非同期操作 (サーバー データの読み取りなど) と同期操作 (大きな配列の走査など) があり、どちらもすぐに結果を取得できません。 。

通常のアプローチは、コールバック関数 (callback) を指定することです。つまり、実行終了後にどの関数を呼び出すかを事前に指定します。

deferred オブジェクトは jquery バージョン 1.5 で導入されました。jquery はコールバックの処理があまり得意ではないため、deferred オブジェクトが生まれました。 deferred オブジェクトは、jQuery のコールバック関数ソリューションです。英語では、defer は「遅延」を意味するため、遅延オブジェクトの意味は、将来の特定の時点まで実行を「遅らせる」ことです。

2. Ajax チェーン操作

最初の記述は次のとおりです: 

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

jquery のバージョンが 1.5 以下の場合、戻り値は XHRオブジェクトであるため、チェーン操作はできませんが、1.5 より高いバージョンでは、Deferred オブジェクトが返され、チェーン操作が可能です。 

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("出错啦！"); });
    done() は success メソッドに相当し、fail() は error メソッドに相当します。チェーンライティング方式の採用により、コードの可読性が大幅に向上しました。

  • 3. 同じ操作に対して複数のコールバック関数を指定する

    • 遅延オブジェクトの大きな利点の 1 つは、複数のコールバック関数を自由に追加できることです。

  • 上記のコードを例にとると、ajax 操作が成功した後、元のコールバック関数に加えて、別のコールバック関数も実行したい場合、どうすればよいですか? 

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

　　.then(successFunc, failureFunc );
    🎜4. 複数の操作にコールバック関数を指定する🎜🎜遅延オブジェクトのもう 1 つの大きな利点は、従来の記述では不可能だった複数のイベントにコールバック関数を指定できることです。それは $.when() です🎜
    $.ajax( "test.html" )

　　.always( function() { alert("已执行！");} );
    🎜 5. 一般的な操作のためのコールバック関数インターフェースの拡張🎜🎜 このコールバック関数インターフェースのセットを、ajax 操作からすべての操作に拡張します。つまり、ajax 操作かローカル操作か、非同期操作か同期操作かに関係なく、どの操作でも遅延オブジェクトのさまざまなメソッドを使用してコールバック関数を指定できます。 🎜
    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;
      })
    })
    🎜 コールバックを追加するとき、$.when();🎜rrreee🎜 を考えるかもしれませんが、$.when() は遅延オブジェクトを受け入れるため、done はすぐに実行されます。そこで、wait() がチェーン上で操作できる遅延オブジェクトを返すように、さらに改良してみましょう 🎜rrreee🎜 。 🎜rrreee🎜6. defferred.resolve() と defferred.reject()🎜🎜deferred は Promise の原則を採用しています。ここで、実行ステータスの概念を明確にする必要があります。遅延オブジェクトには、Uncompleted Completed Failed の 3 つの状態があります。🎜🎜実行ステータスが "Completed" の場合>(解決済み)、遅延オブジェクトは、done() メソッドで指定されたコールバック関数をすぐに呼び出します。
    実行ステータスが "Failed" の場合、fail() メソッドで指定されたコールバック関数。
    実行ステータスが "Unfinished" の場合は、待機し続けるか、progress()メソッドで指定されたコールバック関数 (jQuery 1.7 バージョンで追加)。 🎜🎜<code>deferred.resolve() はステータスを Uncompleted から Completed に変更します。 ==>done()
    deferred.reject() はステータスを Incomplete から Failed に変更します。 ==>fail()🎜rrreee🎜7. defferred.promise();🎜🎜例えば、dtd はグローバル変数なので、いつでも外部からアクセスできます。 ) または failed() が複数回実行されます。 🎜🎜これは明らかに私たちが望んでいることではないので、 defferred.promise の助けが必要です。 🎜🎜 その機能は、元の遅延オブジェクトに別の遅延オブジェクトを返すことです。後者は、実行ステータスの変更に関連しないメソッド (done() メソッドやfail() メソッドなど) のみを開き、それに関連するメソッドをブロックします。メソッド（resolve()メソッドやreject()メソッドなど）を変更して、実行ステータスを変更できないようにします。 🎜rrreee🎜8. $.Deferred(wait)🎜🎜実行ステータスの変更を防ぐ別の方法は、$.Deferred()を使用することです🎜rrreee🎜9. 遅延オブジェクトの概要🎜🎜🎜$.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 中国語 Web サイトの他の関連記事を参照してください。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：jQuery ソース コードでのデータ バッファリングについて学習する次の記事：jQuery ソース コードでのデータ バッファリングについて学習する

関連記事

続きを見る