suchen

Heim >Web-Frontend >js-Tutorial >Analyse des asynchronen Mechanismus des jQuery-Quellcodes

Analyse des asynchronen Mechanismus des jQuery-Quellcodes

不言
不言Original
2018-07-09 15:26:581377Durchsuche

Dieser Artikel stellt hauptsächlich die Analyse des asynchronen Mechanismus des jQuery-Quellcodes vor. Er hat einen gewissen Referenzwert. Jetzt kann ich ihn mit allen teilen.

Asynchroner Mechanismus

Die JavaScript-Programmierung geht häufig mit der asynchronen Programmierung einher, z. B. mit der Remote-Datenerfassung. Viele Callback-Funktionen von JS sind daher häufig auf die Hilfe von Browser-Ereignistreibern angewiesen Unser Code und unsere Algorithmen werden fragmentiert. jQuery bietet eine abstrakte 非阻塞-Lösung: Deferred.

Asynchrones verstehen

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

1. deferredObjekte verstehen

Bei der Entwicklung von Websites stoßen wir oft auf bestimmte Dinge, die lange dauern Zeit-Javascript-Operationen. Darunter gibt es sowohl asynchrone Operationen （比如ajax读取服务器数据） als auch synchrone Operationen （比如遍历一个大型数组）, von denen keine sofort Ergebnisse erzielen kann.

Der übliche Ansatz besteht darin, Rückruffunktionen （callback） für sie anzugeben. Das heißt, Sie legen vorab fest, welche Funktionen nach ihrer Ausführung aufgerufen werden sollen. Das

deferred-Objekt wurde in jquery Version 1.5 eingeführt. jquery kann Rückrufe nicht sehr gut verarbeiten, daher wurde das verzögerte Objekt geboren. Das deferred-Objekt ist die Callback-Funktionslösung für jQuery. Im Englischen bedeutet defer „Verzögerung“, daher besteht die Bedeutung des verzögerten Objekts darin, die Ausführung bis zu einem bestimmten Punkt in der Zukunft zu „verzögern“.

2. Ajax-Kettenoperation

wird zunächst wie folgt geschrieben: 

// < 1.5
$.ajax({

　　　　url: "test.html",

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

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

　　});

Wenn die Version von jquery unter 1.5 liegt, ist der zurückgegebene Wert XHR对象 Daher ist eine Kettenoperation nicht möglich. Wenn die Version jedoch höher als 1.5 ist, lautet das zurückgegebene Objekt Deferred und die Kettenoperation kann ausgeführt werden. 

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

done() entspricht der Erfolgsmethode und fail() entspricht der Fehlermethode. Nach der Einführung der Kettenschreibmethode wird die Lesbarkeit des Codes erheblich verbessert.

3. Geben Sie mehrere Rückruffunktionen für denselben Vorgang an

Einer der großen Vorteile des verzögerten Objekts besteht darin, dass Sie mehrere Rückruffunktionen frei hinzufügen können.

Was soll ich am Beispiel des obigen Codes tun, wenn ich nach erfolgreicher Ajax-Operation zusätzlich zur ursprünglichen Rückruffunktion eine weitere Rückruffunktion ausführen möchte? 

$.ajax("test.html")

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

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

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

4. Geben Sie Rückruffunktionen für mehrere Vorgänge an

Ein weiterer großer Vorteil des verzögerten Objekts besteht darin, dass Sie eine Rückruffunktion für mehrere Ereignisse angeben können, was mit herkömmlichem Schreiben nicht möglich ist. von. Das ist $.when()

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

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

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

5. Callback-Funktionsschnittstellenerweiterung für allgemeine Operationen

Es erweitert diesen Satz von Callback-Funktionsschnittstellen von Ajax-Operationen auf alle Operationen. Mit anderen Worten: Jede Operation – ob es sich um eine Ajax-Operation oder eine lokale Operation handelt, ob es sich um eine asynchrone Operation oder eine synchrone Operation handelt – kann verschiedene Methoden des verzögerten Objekts verwenden, um eine Rückruffunktion anzugeben. 

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

Wir können an $.when(); denken

$.when(wait())

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

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

Aber es hat keine Auswirkung, es wird sofort ausgeführt, weil $.when() eine Verzögerung akzeptiert Objekt. Verbessern wir es also weiter 

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

    return dd;
}

, sodass wait() ein zurückgestelltes Objekt zurückgibt, das in der Kette betrieben werden kann. 

$.when(wait())

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

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

6. deffered.resolve() und deffered.reject()

deferred übernimmt das Prinzip von Promise. Hier müssen wir uns über das Konzept des Ausführungsstatus im Klaren sein. Im verzögerten Objekt gibt es drei Zustände: 未完成 已完成 已失败

Wenn der Ausführungsstatus "已完成" (aufgelöst) ist, ruft das verzögerte Objekt sofort die durch done()方法 angegebene Rückruffunktion auf ;
Wenn der Ausführungsstatus "已失败" ist, rufen Sie die durch die fail()-Methode angegebene Rückruffunktion auf.
Wenn der Ausführungsstatus "未完成" ist, warten Sie weiter oder rufen Sie die durch die progress()-Methode angegebene Rückruffunktion auf 🎜> Methode (hinzugefügt in jQuery 1.7 Version).

defferred.resolve() ändert den Status von 未完成 zu 已完成. ==> done()
defferred.reject() ändert den Status von 未完成 zu 已失败. ==> 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. Die obige Methode weist einige Probleme auf und kann jederzeit extern verwendet werden Dieser Randzustand führt dazu, dass done() oder fail() mehr als einmal ausgeführt wird.

Das ist offensichtlich nicht das, was wir wollen, deshalb brauchen wir die Hilfe von deffered.promise.

Seine Funktion besteht darin, ein anderes verzögertes Objekt auf dem ursprünglichen verzögerten Objekt zurückzugeben. Letzteres öffnet nur Methoden, die nichts mit der Änderung des Ausführungsstatus zu tun haben (z. B. die Methode done() und die Methode fail()). Abschirmen und Ändern von Methoden im Zusammenhang mit dem Ausführungsstatus (z. B. die Methode „resolve()“ und die Methode „reject()“), sodass der Ausführungsstatus nicht geändert werden kann. 

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. $.Deffered(wait)

Eine andere Möglichkeit, Änderungen des Ausführungsstatus zu verhindern, ist die Verwendung von $.Defferd()

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 🎜>

$.Deferred() generiert ein verzögertes Objekt.

  • deferred.done() gibt die Rückruffunktion an, wenn der Vorgang erfolgreich ist

  • 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中文网！

相关推荐：

Das obige ist der detaillierte Inhalt vonAnalyse des asynchronen Mechanismus des jQuery-Quellcodes. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Erfahren Sie mehr über die Datenpufferung im jQuery-QuellcodeNächster Artikel：Erfahren Sie mehr über die Datenpufferung im jQuery-Quellcode

In Verbindung stehende Artikel

Mehr sehen