Eingehende Analyse der deferred.promise()-Methode von Deferred in jQuery_jquery

deferred.promise() und .promise()

Die Syntax dieser beiden APIs ist fast gleich, es gibt jedoch große Unterschiede. deferred.promise() ist eine Methode der Deferred-Instanz, die eine Deferred.Promise-Instanz zurückgibt. Ein Deferred.Promise-Objekt kann als Ansicht des verzögerten Objekts verstanden werden. Es enthält nur eine Reihe von Methoden des verzögerten Objekts, einschließlich: done(), then(), fail(), isResolved(), isRejected(), Always() ,Diese Methoden können nur den Status eines verzögerten Objekts beobachten, aber den internen Status des verzögerten Objekts nicht ändern. Dies eignet sich sehr gut für die API-Kapselung. Beispielsweise kann der Inhaber eines verzögerten Objekts den Status des verzögerten Status (gelöst oder abgelehnt) entsprechend seinen eigenen Anforderungen steuern, er kann jedoch das Promise-Objekt dieses verzögerten Objekts an andere Beobachter zurückgeben, und die Beobachter können nur beobachten Die entsprechende Rückruffunktion ändert den Status, kann jedoch den internen Status des zurückgestellten Objekts nicht ändern und bietet somit einen guten Isolationsschutz.

deferred.promise()

$(function(){ 
  // 
  var deferred = $.Deferred(); 
  var promise = deferred.promise(); 
   
  var doSomething = function(promise) { 
    promise.done(function(){ 
      alert('deferred resolved.'); 
    }); 
  }; 
   
  deferred.resolve(); 
  doSomething(promise); 
}) 

deferred.promise() kann auch einen Objektparameter akzeptieren. Zu diesem Zeitpunkt wird das eingehende Objekt der Promise-Methode zugewiesen und als Ergebnis zurückgegeben.

// Existing object 
var obj = { 
 hello: function( name ) { 
  alert( "Hello " + name ); 
 } 
}, 
// Create a Deferred 
defer = $.Deferred(); 
 
// Set object as a promise 
defer.promise( obj ); 
 
// Resolve the deferred 
defer.resolve( "John" ); 
 
// Use the object as a Promise 
obj.done(function( name ) { 
 this.hello( name ); // will alert "Hello John" 
}).hello( "Karl" ); // will alert "Hello Karl" 

deferred.promise() verhindert lediglich, dass anderer Code den Status dieses verzögerten Objekts ändert. Es versteht sich, dass das von der deferred.promise()-Methode zurückgegebene verzögerte Promise-Objekt nicht über die Methoden „resolve“, „reject“, „progress“, „resolveWith“, „rejectWith“ und „progressWith“ verfügt, die den Status ändern können. Sie können nur done, then, fail und andere verwenden Methoden zum Hinzufügen von Handlern. Oder beurteilen Sie den Status.

deferred.promise() kann den Status des verzögerten Objekts nicht ändern und stellt auch nicht sicher, dass der aktuelle Status unverändert bleibt. Es stellt lediglich sicher, dass Sie den Status des verzögerten Objekts nicht über das von deferred zurückgegebene verzögerte Versprechen ändern können. versprechen(). Wenn wir dtd hier direkt zurückgeben, funktioniert die .done-Verarbeitungsfunktion immer noch bis dtd.resolve(), bevor sie ausgeführt wird.

Für das konkrete Beispiel in diesem Blog ändern wir den Code in die folgende Form:

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

Das Ergebnis einer solchen Ausführung ist das gleiche wie das Ergebnis der vorherigen Rückgabe von dtd.promise.

Was ist der Unterschied? Wenn wir den Code von $.when wie folgt ändern:

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

Wir werden feststellen, dass die Warnung („Haha, erfolgreich!“) sofort ausgeführt wird, es jedoch 5 Sekunden dauert, bis die Meldung „Ausführung abgeschlossen“ angezeigt wird.

Aber wenn unsere Wartefunktion schließlich dtd.promise() zurückgibt, meldet d.resolve() hier einen Fehler, da das Objekt d keine Auflösung()-Methode hat.

Das Gleiche gilt, wenn wir den Code ändern in:

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

Wir können auch feststellen, dass die Warnung („Haha, erfolgreich!“) sofort ausgeführt wird, da das zurückgestellte Objekt dtd aufgelöst wurde (), bevor es in den Wartezustand übergeben wird, und sobald das zurückgestellte Objekt aufgelöst oder abgelehnt wurde, Der Status wird sich nicht ändern.

Dann ändern wir den $.wait-Code in:

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

Wir werden auch feststellen, dass die Warnung („Haha, erfolgreich!“) sofort ausgeführt wird, obwohl dtd nicht aufgelöst wurde und die Methode „wait“ dtd.promise() zurückgibt Das ursprüngliche zurückgestellte Objekt dtd ist nach außen hin sichtbar, und wir können seinen Zustand weiterhin von außen ändern.

Wenn wir also wirklich nicht möchten, dass anderer Code den Status des verzögerten Objekts innerhalb der Wartemethode ändert, sollten wir es so schreiben:

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

Das heißt, deferred nicht direkt verfügbar machen und schließlich deferred.promise() zurückgeben, sodass anderer Code nur Handler hinzufügen kann.

.promise()

Erstens ist dies keine Methode für verzögerte Instanzen! Diese Methode ist eine Methode einer jQuery-Instanz. Diese Methode wird verwendet, um ein Promise-Objekt zurückzugeben, nachdem eine Reihe von Aktionstypen (z. B. eine Animation) abgeschlossen ist, damit der Ereignis-Listener seinen Status überwachen und die entsprechende Verarbeitungsfunktion ausführen kann.

Diese Methode akzeptiert zwei optionale Parameter: .promise( [type,] [target] )

Typ: der Typ der Warteschlange, der Standardwert ist fx, fx ist die Animation des jQuery-Objekts
targetObject: das Objekt, dem Promise-Verhalten zugewiesen werden soll,

Diese beiden Parameter sind optional. Für den ersten Parameter (me) wurde derzeit außer fx kein anderer Werttyp gefunden. Daher wird es im Allgemeinen zum Überwachen von Animationen und zum Ausführen einiger Vorgänge nach Abschluss der Animation verwendet.

Beispiel: Direkte Rückgabe eines aufgelösten State Promise-Objekts ohne Animationseffekt

var div = $( "<div />" ); 

div.promise().done(function( arg1 ) { 
 // 将会被马上触发 
 alert( this === div && arg1 === div ); 
}); 

Beispiel: Lösen Sie die Done()-Listening-Funktion aus, nachdem alle Animationseffekte abgeschlossen sind

<!DOCTYPE html> 
<html> 
<head> 
 <style> 
div { 
 height: 50px; width: 50px; 
 float: left; margin-right: 10px; 
 display: none; background-color: #090; 
} 
</style> 
 <script src="http://code.jquery.com/jquery-latest.js"></script> 
</head> 
<body> 
  
<button>Go</button> 
<p>Ready...</p> 
<div></div> 
<div></div> 
<div></div> 
<div></div> 
<script> 
$("button").bind( "click", function() { 
 $("p").append( "Started..."); 
 //每个div执行动画效果 
 $("div").each(function( i ) { 
  $( this ).fadeIn().fadeOut( 1000 * (i+1) ); 
 }); 
 //$("div")包含一组div，在所有的div都完成自己的动画效果后触发done()函数 
 $( "div" ).promise().done(function() { 
  $( "p" ).append( " Finished! " ); 
 }); 
}); 
</script> 
 
</body> 
</html>