Was ist das verzögerte Objekt in jquery?

Die Bedeutung des verzögerten Objekts besteht darin, die Ausführung bis zu einem bestimmten Punkt in der Zukunft zu „verzögern“. Es handelt sich um eine Callback-Funktionslösung, die das Problem der Handhabung zeitaufwändiger Vorgänge löst und eine bessere Kontrolle über diese Vorgänge bietet Programmierschnittstelle.

Verwandte Empfehlungen: „jQuery Tutorial“

1. Was ist ein verzögertes Objekt?

Bei der Entwicklung von Websites stoßen wir häufig auf bestimmte Javascript-Vorgänge, die lange dauern. Darunter gibt es sowohl asynchrone Vorgänge (z. B. Ajax-Lesen von Serverdaten) als auch synchrone Vorgänge (z. B. das Durchlaufen eines großen Arrays), und die Ergebnisse sind nicht sofort verfügbar.

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

Allerdings ist jQuery in Bezug auf Callback-Funktionen sehr schwach. Um dies zu ändern, hat das jQuery-Entwicklungsteam das verzögerte Objekt entworfen.

Einfach ausgedrückt ist das verzögerte Objekt die Callback-Funktionslö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. Seine Hauptfunktionen lassen sich in vier Punkten zusammenfassen. Im Folgenden lernen wir Schritt für Schritt anhand des Beispielcodes.

2. Kettenschreibmethode der Ajax-Operation

Betrachten Sie zunächst die traditionelle Schreibmethode der Ajax-Operation von jQuery:

　　$.ajax({
　　　　url: "test.html",
　　　　success: function(){　　　　　　alert("哈哈，成功了！");　　　　},
　　　　error:function(){　　　　　　alert("出错啦！");　　　　}
　　});

Im obigen Code akzeptiert $.ajax() einen Objektparameter, der zwei Methoden enthält : Die Erfolgsmethode gibt die Rückruffunktion an, nachdem die Operation erfolgreich war, und die Fehlermethode gibt die Rückruffunktion an, nachdem die Operation fehlgeschlagen ist.

Wenn Sie eine jQuery-Version unter 1.5.0 verwenden, wird nach Abschluss der $.ajax()-Operation ein XHR-Objekt zurückgegeben und Sie können keine Kettenoperationen ausführen, wenn es sich um eine höhere Version als 1.5.0 handelt. Es wird ein verzögerter Wert zurückgegeben. Objekte können verkettet werden.

Die neue Schreibmethode sieht nun so aus:

　　$.ajax("test.html")
　　.done(function(){ alert("哈哈，成功了！"); })
　　.fail(function(){ alert("出错啦！"); });

Wie Sie sehen können, entspricht done() der Erfolgsmethode und fail() 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 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("哈哈，成功了！");} )
　　.fail(function(){ alert("出错啦！"); } )
　　.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.

4. 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.

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

　　$.when($.ajax("test1.html"), $.ajax("test2.html"))
　　.done(function(){ alert("哈哈，成功了！"); })
　　.fail(function(){ alert("出错啦！"); });

Die Bedeutung dieses Codes besteht darin, zuerst zwei Operationen $.ajax("test1.html") und $.ajax ("test1.html") auszuführen. test2.html"), wenn alle erfolgreich sind, führen Sie die durch done() angegebene Rückruffunktion aus; wenn einer oder beide fehlschlagen, führen Sie die durch fail() angegebene Rückruffunktion aus.

5. Callback-Funktionsschnittstelle für allgemeine Operationen (Teil 1)

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.

Schauen wir uns ein konkretes Beispiel an. Angenommen, es gibt eine zeitaufwändige Wartezeit:

　　var wait = function(){
　　　　var tasks = function(){
　　　　　　alert("执行完毕！");
　　　　};
　　　　setTimeout(tasks,5000);
　　};

Wir geben eine Rückruffunktion dafür an. Was sollen wir tun?

Natürlich werden Sie denken, dass Sie $.when() verwenden können:

　　$.when(wait())
　　.done(function(){ alert("哈哈，成功了！"); })
　　.fail(function(){ alert("出错啦！"); });

Wenn Sie es jedoch so schreiben, wird die Methode done() sofort ausgeführt und fungiert nicht als Rückruffunktion. Der Grund dafür ist, dass die Parameter von $.when() nur verzögerte Objekte sein können, daher muss wait() neu geschrieben werden:

　　var dtd = $.Deferred(); // 新建一个deferred对象
　　var wait = function(dtd){
　　　　var tasks = function(){
　　　　　　alert("执行完毕！");
　　　　　　dtd.resolve(); // 改变deferred对象的执行状态
　　　　};
　　　　setTimeout(tasks,5000);
　　　　return dtd;
　　};

Jetzt gibt die Funktion wait() ein verzögertes Objekt zurück, sodass Kettenoperationen hinzugefügt werden können.

　　$.when(wait(dtd))
　　.done(function(){ alert("哈哈，成功了！"); })
　　.fail(function(){ alert("出错啦！"); });

Nachdem die Funktion wait() ausgeführt wurde, wird die durch die Methode done() angegebene Rückruffunktion automatisch ausgeführt.

6. deferred.resolve()-Methode und deferred.reject()-Methode

Wenn Sie genau hinsehen, werden Sie feststellen, dass es in der Funktion wait() oben eine weitere Stelle gibt, die ich nicht erklärt habe. Das ist es, was dtd.resolve() macht?

要说清楚这个问题，就要引入一个新概念"执行状态"。jQuery规定，deferred对象有三种执行状态----未完成，已完成和已失败。如果执行状态是"已完成"（resolved）,deferred对象立刻调用done()方法指定的回调函数；如果执行状态是"已失败"，调用fail()方法指定的回调函数；如果执行状态是"未完成"，则继续等待，或者调用progress()方法指定的回调函数（jQuery1.7版本添加）。

前面部分的ajax操作时，deferred对象会根据返回结果，自动改变自身的执行状态；但是，在wait()函数中，这个执行状态必须由程序员手动指定。dtd.resolve()的意思是，将dtd对象的执行状态从"未完成"改为"已完成"，从而触发done()方法。

类似的，还存在一个deferred.reject()方法，作用是将dtd对象的执行状态从"未完成"改为"已失败"，从而触发fail()方法。

　　var dtd = $.Deferred(); // 新建一个Deferred对象
　　var wait = function(dtd){
　　　　var tasks = function(){
　　　　　　alert("执行完毕！");
　　　　　　dtd.reject(); // 改变Deferred对象的执行状态
　　　　};
　　　　setTimeout(tasks,5000);
　　　　return dtd;
　　};
　　$.when(wait(dtd))
　　.done(function(){ alert("哈哈，成功了！"); })
　　.fail(function(){ alert("出错啦！"); });

七、deferred.promise()方法

上面这种写法，还是有问题。那就是dtd是一个全局对象，所以它的执行状态可以从外部改变。

请看下面的代码：

　　var dtd = $.Deferred(); // 新建一个Deferred对象
　　var wait = function(dtd){
　　　　var tasks = function(){
　　　　　　alert("执行完毕！");
　　　　　　dtd.resolve(); // 改变Deferred对象的执行状态
　　　　};
　　　　setTimeout(tasks,5000);
　　　　return dtd;
　　};
　　$.when(wait(dtd))
　　.done(function(){ alert("哈哈，成功了！"); })
　　.fail(function(){ alert("出错啦！"); });
　　dtd.resolve();

我在代码的尾部加了一行dtd.resolve()，这就改变了dtd对象的执行状态，因此导致done()方法立刻执行，跳出"哈哈，成功了！"的提示框，等5秒之后再跳出"执行完毕！"的提示框。

为了避免这种情况，jQuery提供了deferred.promise()方法。它的作用是，在原来的deferred对象上返回另一个deferred对象，后者只开放与改变执行状态无关的方法（比如done()方法和fail()方法），屏蔽与改变执行状态有关的方法（比如resolve()方法和reject()方法），从而使得执行状态不能被改变。

请看下面的代码：

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

　　　　setTimeout(tasks,5000);
　　　　return dtd.promise(); // 返回promise对象
　　};
　　var d = wait(dtd); // 新建一个d对象，改为对这个对象进行操作
　　$.when(d)
　　.done(function(){ alert("哈哈，成功了！"); })
　　.fail(function(){ alert("出错啦！"); });
　　d.resolve(); // 此时，这个语句是无效的

在上面的这段代码中，wait()函数返回的是promise对象。然后，我们把回调函数绑定在这个对象上面，而不是原来的deferred对象上面。这样的好处是，无法改变这个对象的执行状态，要想改变执行状态，只能操作原来的deferred对象。

不过，更好的写法是allenm所指出的，将dtd对象变成wait(）函数的内部对象。

　　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("哈哈，成功了！"); })
　　.fail(function(){ alert("出错啦！"); });

八、普通操作的回调函数接口（中）

另一种防止执行状态被外部改变的方法，是使用deferred对象的建构函数$.Deferred()。

这时，wait函数还是保持不变，我们直接把它传入$.Deferred()：

　　$.Deferred(wait)
　　.done(function(){ alert("哈哈，成功了！"); })
　　.fail(function(){ alert("出错啦！"); });

jQuery规定，$.Deferred()可以接受一个函数名（注意，是函数名）作为参数，$.Deferred()所生成的deferred对象将作为这个函数的默认参数。

九、普通操作的回调函数接口（下）

除了上面两种方法以外，我们还可以直接在wait对象上部署deferred接口。

　　var dtd = $.Deferred(); // 生成Deferred对象
　　var wait = function(dtd){
　　　　var tasks = function(){
　　　　　　alert("执行完毕！");
　　　　　　dtd.resolve(); // 改变Deferred对象的执行状态
　　　　};
　　　　setTimeout(tasks,5000);
　　};
　　dtd.promise(wait);
　　wait.done(function(){ alert("哈哈，成功了！"); })
　　.fail(function(){ alert("出错啦！"); });
　　wait(dtd);

这里的关键是dtd.promise(wait)这一行，它的作用就是在wait对象上部署Deferred接口。正是因为有了这一行，后面才能直接在wait上面调用done()和fail()。

十、小结：deferred对象的方法

前面已经讲到了deferred对象的多种方法，下面做一个总结：

　　（1） $.Deferred() 生成一个deferred对象。

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

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

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

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

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

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

除了这些方法以外，deferred对象还有二个重要方法，上面的教程中没有涉及到。

　　（8）deferred.then()

有时为了省事，可以把done()和fail()合在一起写，这就是then()方法。

　　$.when($.ajax( "/main.php" ))
　　.then(successFunc, failureFunc );

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

　　（9）deferred.always()

这个方法也是用来指定回调函数的，它的作用是，不管调用的是deferred.resolve()还是deferred.reject()，最后总是执行。

　　$.ajax( "test.html" )
　　.always( function() { alert("已执行！");} );

更多编程相关知识，请访问：编程课程！！

Das obige ist der detaillierte Inhalt vonWas ist das verzögerte Objekt in jquery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!