cas d'utilisation d'objet différé jquery

Cette fois, je vais vous présenter un cas d'utilisation de l'objet retardé jquery. Quelles sont les précautions lors de l'utilisation d'un objet retardé jquery. Ce qui suit est un cas pratique, jetons un coup d'œil.

Mon niveau technique est généralement limité. S'il y a des erreurs, merci de me corriger.

ES6 a implémenté la promesse d'objet retardé, mais aujourd'hui, le protagoniste est l'objet retardé dans JQ, et les routines sont en fait les mêmes. Regardons un exemple assez tiré par les cheveux :

<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");
  })
})

Concentrez-vous maintenant sur la fonction. Lorsque nous cliquons sur le bouton ajouter, nous pouvons voir que l'élément span est ajouté et que la couleur devient rouge. Ensuite, nous avons examiné les éléments hétérogènes de notre code, le début var dfd = new $.Deferred(); et le dfd.resolve() dans la fonction d'ajout d'événement et le dernier dfd.done(function(){ $(" span").css("color","red");}).

　$.Deferred() est au centre de notre introduction aujourd'hui --- l'objet delay dans JQ Le soi-disant delay signifie qu'il peut s'exécuter dans un certain laps de temps dans le futur. Examinons un flux de traitement du code ci-dessus. Dans le code ci-dessus, nous appelons la méthode dfd.done() de l'objet retardé nouvellement créé et passons une expression de fonction anonyme dans la position du paramètre. traitement de l'événement click Lorsque la fonction est exécutée, dfd.resolve() est appelée, puis la fonction anonyme que nous avons écrite dans dfd.done() est exécutée. Dans ce processus, nous pouvons voir que dfd. met la fonction en position de résolution. dfd est un objet delay, qui peut évidemment changer l'ordre d'exécution des fonctions.

Quand vous regardez le code ci-dessus, si vous y réfléchissez bien, vous constaterez qu'il est utile. Nous mettons le code qui change la couleur de dans une fonction, et appelons. cette fonction lorsque vous cliquez dessus. Ce n'est pas génial. C'est tellement difficile à écrire. En fait, l’utilisation la plus courante des objets différés se fait en AJAX. Dans le code ci-dessus, après avoir cliqué sur Ajouter, nous cliquons sur Supprimer puis sur Ajouter. À ce moment, nous constatons que le mot ne devient pas rouge cette fois-ci, car l'objet de retard devient invalide après le changement d'état. franchement, c'est une utilisation unique.

Utilisation d'objets différés

JQ implémente pour nous la fonction d'objets différés. Nous l'appelons généralement Différé ou Promesse, ce qui est fondamentalement la même chose. Promise est une sous-classe dérivée de Deferred.

Lorsque nous l'utilisons, nous créons d'abord un objet différé : var dfd = new $.Deferred().

L'objet retardé dfd a trois états : en attente, résolu et rejeté. Nous pouvons vérifier l'état à ce moment-là en utilisant la méthode d'état sur l'objet dfd : dfd.state().

Une fois dfd créé, son statut est en attente. Après avoir appelé la méthode de résolution : dfd.resolve(), son statut sera résolu et la fonction dans dfd.done() sera exécutée pour rejeter les appels à dfd. . Après la méthode : dfd.reject(), son statut passera à rejeté, puis la méthode dans dfd.fail() sera exécutée, et l'objet dfd ne changera pas après être passé de en attente à résolu ou rejeté. notre code ci-dessus ne peut rendre le texte rouge qu'après le premier clic.

Jetons un coup d'œil au code de départ. Notre dfd.done() définit une fonction qui rend la police rouge. Après avoir cliqué sur la fonction, dfd appelle solve After. le statut de dfd passe de en attente à résolu, la méthode terminée sera exécutée et la couleur deviendra rouge.

Les paramètres peuvent être passés entre dfd.resolve() et dfd.done(). Maintenant, nous apportons quelques modifications au code de départ :

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

Nous cliquons sur la police. La couleur est devenue. vert.

De plus, dfd a toujours une autre fonction : dfd.always() Les fonctions de toujours seront exécutées chaque fois que l'état de dfd passe d'en attente.

Chaque méthode de dfd renverra un objet delay, il peut donc y en avoir plusieurs effectués, échoués et toujours, qui peuvent être directement écrits sous forme d'appel en chaîne :

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

Quelle que soit l'API de dfd, vous pouvez en écrire plusieurs. le moment où nous le ferons. Vous pouvez déterminer si son ordre d'exécution peut être garanti. Nous pouvons être assurés que l'ordre d'exécution des fonctions de dfd ne pose absolument aucun problème et sera exécuté dans l'ordre dans lequel nous l'avons écrit :

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

La première fonction ajoute des éléments, la seconde. fonction Changer la couleur des éléments ajoutés.

　　无论什么时候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插件封装步骤详解

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!