Introduction à l'utilisation d'objets différés dans jquery (avec exemples)

Cet article vous apporte une introduction à l'utilisation des objets différés dans jquery (avec des exemples). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Qu'est-ce qu'un objet différé ?

Les objets différés, introduits dans jQuery 1.5, créent un objet outil chaînable en appelant la méthode jQuery.Deferred(). Il peut enregistrer plusieurs rappels dans la file d'attente de rappel, appeler la file d'attente de rappel et se préparer à remplacer l'état de réussite ou d'échec de toute fonction synchrone ou asynchrone. ——JQuery API Chinese Documentation En termes simples, l'objet différé est la solution de fonction de rappel de jQuery. En anglais, defer signifie « retard », donc la signification d'un objet différé est de « retarder » l'exécution jusqu'à un certain point dans le futur. Il résout le problème de la gestion des opérations chronophages, offre un meilleur contrôle sur ces opérations et une interface de programmation unifiée. ——Ruan Yifeng

La fonction principale de l'objet différé

Méthode d'écriture en chaîne de l'opération ajax

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

$.ajax() Après le l'opération est terminée, si vous utilisez une version de jQuery inférieure à 1.5.0, un objet XHR est renvoyé et les opérations de chaînage ne peuvent pas être effectuées ; s'il s'agit d'une version supérieure à 1.5.0, un objet différé est renvoyé et les opérations de chaînage sont effectuées ; possible. Comme vous pouvez le voir, done() est équivalent à la méthode success et fail() est équivalent à la méthode error. Après avoir adopté la méthode d'écriture en chaîne, la lisibilité du code est grandement améliorée.

Ici, nous mettons l'accent sur l'objet jqXHR. À partir de jQuery 1.5, l'objet jqXHR renvoyé par $.ajax() lui-même est un objet différé, il peut donc être appelé dans une chaîne comme dans le code ci-dessus.

À partir de jQuery 1.5, l'objet jqXHR renvoyé par $.ajax() implémente l'interface Promise, afin qu'il possède toutes les propriétés, méthodes et comportements de Promise. (Voir Objet différé pour plus d'informations). Afin d'unifier le nom de la fonction de rappel, il est plus simple de l'utiliser dans $.ajax(). jqXHR fournit également les méthodes .error() .success() et .complete(). Ces méthodes prennent toutes un paramètre, qui est une fonction. Cette fonction est appelée à la fin de la requête $.ajax(), et les paramètres reçus par cette fonction sont cohérents avec les paramètres lorsque la fonction $.ajax() est appelée. . Cela vous permettra d'attribuer plusieurs fonctions de rappel sur une seule demande, et même d'attribuer des fonctions de rappel une fois la demande terminée (si la demande est terminée, la fonction de rappel sera appelée immédiatement).

Remarque : les rappels jqXHR.success(), jqXHR.error() et jqXHR.complete() sont obsolètes à partir de jQuery 1.8 et supprimés à partir de jQuery 3.0. Vous pouvez utiliser jqXHR.done (), jqXHR. .fail() et jqXHR.always() à la place.

Spécifiez plusieurs fonctions de rappel pour la même opération
L'un des grands avantages de l'objet différé est qu'il vous permet d'ajouter librement plusieurs fonctions de rappel. En prenant le code ci-dessus comme exemple, si une fois l'opération ajax réussie, en plus de la fonction de rappel d'origine, je souhaite également exécuter une autre fonction de rappel, que dois-je faire ? C'est très simple, il suffit de l'ajouter à la fin.

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

Vous pouvez ajouter autant de fonctions de rappel que vous le souhaitez, et elles seront exécutées dans l'ordre dans lequel elles sont ajoutées.

Spécifier des fonctions de rappel pour plusieurs opérations
Un autre grand avantage de l'objet différé est qu'il vous permet de spécifier une fonction de rappel pour plusieurs événements, ce qui n'est pas possible avec l'écriture traditionnelle. de.

Veuillez regarder le code suivant, qui utilise une nouvelle méthode jQuery.when() :

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

La signification de ce code est d'effectuer d'abord deux opérations $.ajax( "test1 .html") et $.ajax("test2.html"), si les deux réussissent, exécutez la fonction de rappel spécifiée par done(); si l'une d'elles échoue ou si les deux échouent, exécutez la fonction de rappel spécifiée par fail(). function.

$.when() Veuillez vous référer à la documentation pour plus de détails sur la façon d'utiliser la méthode.

Interface de fonction de rappel pour les opérations courantes
Le plus grand avantage de l'objet différé est qu'il étend cet ensemble d'interfaces de fonction de rappel des opérations ajax à toutes les opérations. En d'autres termes, toute opération - qu'il s'agisse d'une opération ajax ou d'une opération locale, qu'il s'agisse d'une opération asynchrone ou synchrone - peut utiliser diverses méthodes de l'objet différé pour spécifier une fonction de rappel.

Regardons un exemple spécifique de spécification d'une fonction de rappel pour une opération d'attente qui prend du temps :

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

Une autre approche consiste à transmettre directement la fonction d'attente dans $.Deferred() :

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

jQuery stipule que $.Deferred() peut accepter un nom de fonction (attention, c'est un nom de fonction) comme paramètre, et l'objet différé généré par $.Deferred() servira de valeur par défaut pour ce paramètre de fonction.

Pour des informations plus spécifiques, veuillez vous référer à la documentation de Ruan Yifeng.

Méthode objet différé

$.Deferred() génère un objet différé.
La fonction d'usine jQuery.Deferred([beforeStart]) crée un nouvel objet différé.

Description : une fonction d'usine qui renvoie un objet utilitaire chaîné. Utilisez la méthode d'objet de retour pour enregistrer plusieurs rappels dans la file d'attente de rappel, appeler la file d'attente de rappel et transmettre l'état de réussite ou d'échec de toute fonction synchrone ou asynchrone. .

beforeStart : Type Function( Deferred deferred ), un constructeur qui renvoie la fonction précédemment appelée.

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视频教程栏目！

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!