Anwendungsfall für verzögerte JQuery-Objekte

Dieses Mal werde ich Ihnen einen Anwendungsfall für ein verzögertes JQuery-Objekt vorstellen. Was sind die Vorsichtsmaßnahmen bei der Verwendung eines verzögerten JQuery-Objekts? Das Folgende ist ein praktischer Fall.

Mein technisches Niveau ist im Allgemeinen begrenzt. Wenn es Fehler gibt, korrigieren Sie mich bitte.

ES6 hat das verzögerte Objekt Promise implementiert, aber heute ist der Protagonist das verzögerte Objekt in JQ, und die Routinen sind tatsächlich dieselben. Schauen wir uns ein weit hergeholtes Beispiel an:

<button id="add">add</button><button id="remove">remove</button>
<p id="content"></p>

$(function(){
  var dfd = new $.Deferred();
  var add = $("#add");
  var remove = $("#remove");
  var content = $("#content");
  add.click(function(){
    var span = $("<span>我是点击按钮创建的元素</span>");
    $("span").length==0&&$("body").append(span);
    dfd.resolve();
  })
  remove.click(function(){
    var span = $("span");
    span&&span.remove();
  })
  dfd.done(function(){
    $("span").css("color","red");
  })
})

Konzentrieren Sie sich nun auf die Funktion. Wenn wir auf die Schaltfläche „Hinzufügen“ klicken, können wir sehen, dass das Span-Element hinzugefügt wird und die Farbe rot wird . Dann haben wir uns die heterogenen Dinge in unserem Code angesehen, die Anfangsvariable dfd = new $.Deferred(); und die Funktion dfd.resolve() in der Funktion add event; span").css("color","red");}).

　$.Deferred() steht heute im Mittelpunkt unserer Einführung – das Verzögerungsobjekt in JQ. Die sogenannte Verzögerung bedeutet, dass es in einem bestimmten Zeitraum in der Zukunft ausgeführt werden kann. Schauen wir uns einen Verarbeitungsablauf des obigen Codes an. Im obigen Code rufen wir die Methode dfd.done() des neu erstellten verzögerten Objekts auf und übergeben einen anonymen

-Funktionsausdruck an der Parameterposition Verarbeitung des Klickereignisses Wenn die Funktion ausgeführt wird, wird dfd.resolve() aufgerufen und dann wird die anonyme Funktion , die wir in dfd.done() geschrieben haben, ausgeführt. In diesem Prozess können wir sehen, dass dfd Versetzt die Funktion in die Position „Fertig“ in der Auflösungsposition. dfd ist ein Verzögerungsobjekt, das die Ausführungsreihenfolge von Funktionen ändern kann.

Wenn Sie sich den obigen Code ansehen und sorgfältig darüber nachdenken, werden Sie feststellen, dass er nützlich ist. Wir fügen den Code

ein, der die Farbe von in einer Funktion ändert, und rufen ihn auf Wenn diese Funktion angeklickt wird, ist das nicht so toll. Es ist so mühsam zu schreiben. Tatsächlich werden verzögerte Objekte am häufigsten in AJAX verwendet. Nachdem wir im obigen Code auf „Hinzufügen“ geklickt haben, klicken wir auf „Hinzufügen“. Diesmal stellen wir fest, dass das Wort nicht rot wird. Dies liegt daran, dass das verzögerte Objekt ungültig wird Offen gesagt handelt es sich um eine einmalige Verwendung.

Verzögerte Objekte verwenden

JQ implementiert die Funktion von verzögerten Objekten. Wir nennen es im Allgemeinen „Deferred“ oder „Promise“, was im Grunde dasselbe ist. Promise ist eine von Deferred abgeleitete Unterklasse.

Wenn wir es verwenden, erstellen wir zunächst ein verzögertes Objekt: var dfd = new $.Deferred().

Das verzögerte Objekt dfd hat drei Status: ausstehend, gelöst und abgelehnt. Wir können den Status zu diesem Zeitpunkt überprüfen, indem wir die Statusmethode für das dfd-Objekt verwenden: dfd.state().

Nachdem dfd erstellt wurde, lautet sein Status „Ausstehend“. Nach dem Aufruf der Auflösungsmethode dfd.resolve() wird der Status „aufgelöst“ und dann wird die Funktion in dfd.done() ausgeführt . Nach der Methode: dfd.reject() ändert sich ihr Status in „Abgelehnt“ und dann wird die Methode in dfd.fail() ausgeführt, und das dfd-Objekt ändert sich nicht, nachdem es von „Ausstehend“ zu „Aufgelöst“ oder „Abgelehnt“ geändert wurde Unser Code oben kann den Text erst nach dem ersten Klick rot machen.

Schauen wir uns den Startcode an. Unser dfd.done() definiert eine Funktion, die die Schriftart rot färbt. Nach dem Klicken wird dfd aufgerufen Der Status von dfd ändert sich von „Ausstehend“ zu „Gelöst“, die Methode „Fertig“ wird ausgeführt und die Farbe wird rot.

Parameter können zwischen dfd.resolve() und dfd.done() übergeben werden. Jetzt nehmen wir einige Änderungen am Startcode vor:

//done里面的修改如下
dfd.done(function(color){$("span").css("color",color)})
//点击事件的处理函数修改如下
dfd.resolve("green");

Wir klicken auf die Schriftart. Die Farbe wurde geändert Grün.

Darüber hinaus verfügt dfd über eine weitere Funktion: dfd.always(). Die Funktionen in „always“ werden immer dann ausgeführt, wenn sich der Status von dfd von „Ausstehend“ ändert.

Jede Methode von dfd gibt ein Verzögerungsobjekt zurück, sodass es mehrere „done“, „fail“ und „always“ geben kann, die direkt als Kettenaufruf geschrieben werden können:

dfd.done (function(){}).done(function(){}).fail(function(){});

Egal welche API von dfd, Sie können mehrere davon schreiben Zu gegebener Zeit werden wir prüfen, ob die Ausführungsreihenfolge garantiert werden kann. Wir können sicher sein, dass die Ausführungsreihenfolge der dfd-Funktionen absolut kein Problem darstellt und in der Reihenfolge ausgeführt wird, in der wir sie geschrieben haben:

dfd.done(function(){
  var span = $("<span>我是点击按钮创建的元素</span>");
  $("span").length==0&&$("body").append(span);
})
.done(function(color){
  $("span").css("color",color)});
})

Die erste Funktion fügt Elemente hinzu, die zweite Funktion Ändern Sie die Farbe hinzugefügter Elemente.

　　无论什么时候dfd三个API里面的函数都会在dfd的状态从pending变化之后才能执行，在异步的情况下如此，在同步的情况下也是。更确切的说dfd在调用dfd.resolve()之后已经执行过的done的里面的函数会立即执行，对于dfd.resolve()后面的done来说当程序走到它那时才会执行：

var dfd = new $.Deferred();
dfd.done(function(){console.log(1)});
dfd.done(function(){console.log(2)});
console.log("resolve before");
dfd.resolve();
console.log("resolve after");
dfd.done(function(){console.log(3)});
//resolve before,1,2,resolve after,3

延迟对象示例

　　最开始我们使用JQ的AJAX的时候我们通常的写法是：

$.ajax({
 url:"x/y",
 type:"post",
 data:"{...}",
 contentType:"application/json; charset=utf-8",
 success:function(){},
 error:function(){}
})

　　在1.5(好像是这个版本~)之后AJAX会返回一个Promise对象，继而我们可以写成下面这种：

$.ajax({
 url:"x/y",
 type:"post",
 data:"{...}",
 contentType:"application/json; charset=utf-8",
}).done(function(){})
.fail(function(){})

　　看起来更骚气了一点，而且这我们还可以在加多个.done(function(){})，每个done处理不同的事情这样看起来比较清晰。

　　已经知道延迟对象可以改变代码的执行顺序，假如我们又下面的代码：

$.ajax({
 url:"取数据",
 type:"post",
 contentType:"xxx"
}).done(function(data){
  $.ajax({
    url:"利用data取数据",
    data:data,
    type:"post",
    contentType:"xxxx"
  }).done(function(data){
    use data to _do sth...
  })
})

　　我们会发现嵌套的有点多了，我们就可以利用延迟对象让他看起来更加好看一点：

var dfd = new $.Deferred();
$.ajax({
 url:"取数据",
 type:"post",
 contentType:"xxx"
}).done(function(data){
  dfd.resolve(data);
})
dfd.done(function(data){
  $.ajax({
    url:"利用data取数据",
    data:data,
    type:"post",
    contentType:"xxxx"
  }).done(function(data){
    use data to _do sth...
  })
})

　　没有延迟对象我们一样能完成需要的功能，此时我们就需要一层一层嵌套我们处理过程了，而有了延迟对象我们就可以避免这种事了，他可以轻松控制代码的执行顺序，让代码看起来更请清晰。你可能会说我封装函数在合适的地方调不就行了，如果自己看自己写的代码没问题，但是换一个人他的滚动条可能就一直上上下下了。

　　延迟对象的里一个作用就是可以合并AJAX的调用，比如一个接口取数据A另一个接口取数据B，AB都取到之后我们在利用这些数据做一些喜欢做的事，我们就可以利用延迟对象轻松实现。此时我们就可以利用JQ的$.when()来实现。$.when()就跟他的名字一样-当什么的时候-，他的参数可以是Promise对象，也可以是字符串（很少遇到不在介绍），他的返回结果也是一个Promise对象，下面看一个小例子： 

  var allData = {};
  var dataA = $.ajax({
    url:"获取A的URL",
    type:"post",
  }).done(function(data){
    allData.a = data;
  });
  var dataB = $.ajax({
    url:"获取B的URL",
    type:"post",
  }).done(function(data){
    allData.b = data;
  });
  $.when(dataA,dataB).done(function(){
    use allData to _do sth...
  });

　　allData是保存所有数据的一个集合，dataA是第一个AJAX返回的Promise对象，dataB是第二个。$.when()的done方法执行的唯一条件就是dataA和dataB都执行成功。

　　补充：dfd还有一对组合就是notify+progress当dfd对象的状态处于pending时可以调用dfd.nothfy(),调用之后dfd.progress()里面的函数会执行，只要dfd处于pending状态dfd.notify()就可以一直调用，同样也可以传递参数。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

jQuery版本升级有哪些注意事项 

jQuery插件封装步骤详解

Das obige ist der detaillierte Inhalt vonAnwendungsfall für verzögerte JQuery-Objekte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!