Einführung in die Verwendung verzögerter Objekte in JQuery (mit Beispielen)

Dieser Artikel bietet Ihnen eine Einführung in die Verwendung verzögerter Objekte in jquery (mit Beispielen). Ich hoffe, dass er Ihnen als Referenz dienen wird.

Was ist ein zurückgestelltes Objekt?

Verzögerte Objekte, eingeführt in jQuery 1.5, erstellen ein verkettbares Werkzeugobjekt durch Aufrufen der jQuery.Deferred()-Methode. Es kann mehrere Rückrufe in der Rückrufwarteschlange registrieren, die Rückrufwarteschlange aufrufen und sich darauf vorbereiten, den Erfolgs- oder Fehlerstatus jeder synchronen oder asynchronen Funktion zu ersetzen. ——Chinesische Dokumentation der jQuery-API Einfach ausgedrückt ist das verzögerte Objekt die Rückruffunktionslösung von jQuery. Im Englischen bedeutet defer „Verzögerung“. Die Bedeutung eines verzögerten Objekts besteht also darin, die Ausführung bis zu einem bestimmten Punkt in der Zukunft zu „verzögern“. Es löst das Problem der Handhabung zeitaufwändiger Vorgänge, bietet eine bessere Kontrolle über diese Vorgänge und eine einheitliche Programmierschnittstelle. ——Ruan Yifeng

Die Hauptfunktion des verzögerten Objekts

Kettenschreibmethode der Ajax-Operation

$.ajax("test.html")
　  .done(function(){ alert("success"); })
　  .fail(function(){ alert("error"); });

$.ajax() Nach der Operation ist abgeschlossen, wenn Sie eine Version von jQuery verwenden, die niedriger als 1.5.0 ist, wird ein XHR-Objekt zurückgegeben und Verkettungsvorgänge können nicht ausgeführt werden; wenn es sich um eine Version höher als 1.5.0 handelt, wird ein verzögertes Objekt zurückgegeben und Verkettungsvorgänge sind möglich . Wie Sie sehen können, entspricht done() der Erfolgsmethode und fail() entspricht der Fehlermethode. Nach der Einführung der Kettenschreibmethode wird die Lesbarkeit des Codes erheblich verbessert.

Hier betonen wir das jqXHR-Objekt. Ab jQuery 1.5 ist das von $.ajax() zurückgegebene jqXHR-Objekt selbst ein verzögertes Objekt, sodass es wie im obigen Code in einer Kette aufgerufen werden kann.

Ab jQuery 1.5 implementiert das von $.ajax() zurückgegebene jqXHR-Objekt die Promise-Schnittstelle, sodass es über alle Eigenschaften, Methoden und Verhaltensweisen von Promise verfügt. (Weitere Informationen finden Sie unter „Verzögertes Objekt“). Um den Namen der Rückruffunktion in $.ajax() zu vereinheitlichen und einfach zu verwenden. jqXHR bietet auch die Methoden .error(), .success() und .complete(). Diese Methoden benötigen alle einen Parameter, bei dem es sich um eine Funktion handelt, die am Ende der $.ajax()-Anfrage aufgerufen wird, und die von dieser Funktion empfangenen Parameter stimmen mit den Parametern beim Aufruf der $.ajax()-Funktion überein . Auf diese Weise können Sie in einer einzigen Anfrage mehrere Callback-Funktionen zuweisen und sogar Callback-Funktionen zuweisen, nachdem die Anfrage abgeschlossen ist (wenn die Anfrage abgeschlossen ist, wird die Callback-Funktion sofort aufgerufen).

Hinweis: Die Rückrufe jqXHR.success(), jqXHR.error() und jqXHR.complete() sind ab jQuery 1.8 veraltet und ab jQuery 3.0 entfernt. Sie können jqXHR.done(), jqXHR verwenden .fail() und stattdessen jqXHR.always().

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 auch eine weitere Rückruffunktion ausführen möchte? Es ist ganz einfach, fügen Sie es einfach am Ende hinzu.

$.ajax("test.html")
　　 .done(function(){ alert('success'); })
　　 .fail(function(){ alert('error'); })
　   .done(function(){ alert('第二个回调函数！'); });

Sie können so viele Rückruffunktionen hinzufügen, wie Sie möchten, und sie werden in der Reihenfolge ausgeführt, in der sie hinzugefügt werden.

Rückruffunktionen für mehrere Vorgänge angeben
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.

Bitte schauen Sie sich den folgenden Code an, der eine neue Methode jQuery.when() verwendet:

$.when($.ajax("test1.html"), $.ajax("test2.html"))
　　 .done(function(){ alert('success'); })
　　 .fail(function(){ alert('error'); });

Die Bedeutung dieses Codes besteht darin, zuerst zwei Operationen auszuführen $.ajax("test1 .html ") und $.ajax("test2.html"), wenn beide erfolgreich sind, wird die durch done() angegebene Rückruffunktion ausgeführt; wenn einer fehlschlägt oder beide fehlschlagen, wird die durch fail() angegebene Rückruffunktion ausgeführt.

$.when() Einzelheiten zur Verwendung der Methode finden Sie in der Dokumentation.

Callback-Funktionsschnittstelle für allgemeine Operationen
Der größte Vorteil des verzögerten Objekts besteht darin, dass es diesen Satz von Callback-Funktionsschnittstellen von Ajax-Operationen auf alle Operationen erweitert. 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.

Sehen wir uns ein konkretes Beispiel an, in dem eine Rückruffunktion für eine zeitaufwändige Operation „Wait“ angegeben wird:

var wait = function (dtd) {
    var dtd = $.Deferred(); // 在函数内部，新建一个Deferred对象
    var tasks = function () {
        alert('执行完毕！');
        dtd.resolve(); // 改变Deferred对象的执行状态
    };

    setTimeout(tasks, 5000);
    return dtd.promise(); // 返回promise对象
};

$.when(wait())
    .done(function () { alert('success'); })
    .fail(function () { alert('error'); });

Eine andere Möglichkeit besteht darin, die Wartefunktion direkt an $.Deferred() zu übergeben:

$.Deferred(wait)
　　 .done(function(){ alert('success'); })
　　 .fail(function(){ alert('error'); });

jQuery legt fest, dass $.Deferred() einen Funktionsnamen (beachten Sie, dass es sich um einen Funktionsnamen handelt) als Parameter akzeptieren kann und das von $.Deferred() generierte verzögerte Objekt als Standardparameter von verwendet wird diese Funktion.

Weitere spezifische Informationen finden Sie in der Dokumentation von Ruan Yifeng.

Methode des verzögerten Objekts

$.Deferred() generiert ein verzögertes Objekt.
Die Factory-Funktion jQuery.Deferred([beforeStart]) erstellt ein neues verzögertes Objekt.

Beschreibung: Eine Factory-Funktion, die ein verkettetes Dienstprogrammobjekt zurückgibt. Verwenden Sie die Return-Object-Methode, um mehrere Rückrufe in der Rückrufwarteschlange zu registrieren, die Rückrufwarteschlange aufzurufen und den Erfolgs- oder Fehlerstatus einer beliebigen synchronen oder asynchronen Funktion zu übergeben . .

beforeStart : Typ Function( Deferred deferred ), ein Konstruktor, der die zuvor aufgerufene Funktion zurückgibt.

jQuery.Deferred 方法可以传递一个可选的函数， 这个函数在方法返回之前调用，并且会把新的 deferred（延迟）对象作为 this 对象，将其作为第一个参数传递给函数。例如，被调用的函数可以使用 deferred.then() 绑定回调。

deferred.done() 指定操作成功时的回调函数。

deferred.fail() 指定操作失败时的回调函数。

deferred.promise() 没有参数时，返回一个新的 deferred。 对象，该对象的运行状态无法被改变；接受参数时，作用为在参数对象上部署 deferred 接口。

deferred.resolve() 手动改变 deferred 对象的运行状态为"已完成"，从而立即触发 done() 方法。

一个 Deferred（延迟）对象开始于 pending 状态。 任何回调使用 deferred.then(), deferred.always(), deferred.done(), 或者 deferred.fail() 添加到这个对象都是排队等待执行。调用 deferred.resolve() 转换 Deferred（递延）到 resolved（解决）的状态，并立即执行设置中任何的 doneCallbacks。调用 deferred.reject() 转换 Deferred（递延）到 rejected（拒绝）的状态，并立即执行设置中任何的 failCallbacks。一旦对象已经进入了解决或拒绝状态，它处于该状态。回调仍然可以添加到解决或拒绝 Deferred（递延）- 他们会立即执行。

$.ajax() 返回的 jqXHR 对象 会根据请求返回的结果，自动改变自身的执行状态。但是，对于其他通过 $.Deferred() 方法生成的 deferred 对象，它们的执行状态必须由程序员手动指定，由代码决定在什么时候触发回调函数。

deferred.reject() 这个方法与 deferred.resolve() 正好相反，调用后将 deferred 对象的运行状态变为"已失败"，从而立即触发 fail() 方法。

$.when() 为多个操作指定回调函数。

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('已执行！');} );

更多信息请参见 jQuery API中文文档。

本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注PHP中文网的JavaScript视频教程栏目！

Das obige ist der detaillierte Inhalt vonEinführung in die Verwendung verzögerter Objekte in JQuery (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!