recherche

Maison  >  Article  >  interface Web  >  Analyse du mécanisme asynchrone du code source jQuery

Analyse du mécanisme asynchrone du code source jQuery

不言
不言original
2018-07-09 15:26:581327parcourir

Cet article présente principalement l'analyse du mécanisme asynchrone du code source de jQuery. Il a maintenant une certaine valeur de référence. Maintenant, je le partage avec tout le monde. Les amis dans le besoin peuvent s'y référer

Mécanisme asynchrone

<.> La programmation JavaScript est souvent accompagnée d'une programmation asynchrone, telle que l'acquisition de données à distance. Une grande quantité de programmation asynchrone apportera de nombreuses fonctions de rappel. JS est monothread, donc l'exécution asynchrone nécessite souvent l'aide de pilotes d'événements du navigateur, ce qui le fera. notre code et nos algorithmes se fragmentent. jQuery fournit une solution abstraite

 : 非阻塞. Deferred

Comprendre l'asynchrone 

alert(1)
setTimeout(function(){
    alert(2)
},0)
alert(3)
//alert(1) 
//alert(3)
//alert(2)
1. Comprendre les

Objets deferred

Dans le processus de développement de sites Web, nous rencontrons souvent certains processus chronophages. Opération javascript très longue. Parmi elles, il existe à la fois des opérations asynchrones

et des opérations synchrones （比如ajax读取服务器数据）, dont aucune ne peut obtenir de résultats immédiats. （比如遍历一个大型数组）

L'approche habituelle consiste à leur attribuer des fonctions de rappel

. Autrement dit, spécifiez à l'avance quelles fonctions doivent être appelées une fois leur exécution terminée. L'objet （callback）

a été introduit dans la version 1.5 de jquery. Jquery n'est pas très doué pour gérer les rappels, donc l'objet différé est né. L'objet deferred est la solution de fonction de rappel pour deferred. En anglais, jQuery signifie "retard", donc la signification de l'objet différé est de "retarder" l'exécution jusqu'à un certain point dans le futur. defer

2. L'opération de chaîne Ajax

s'écrit initialement comme suit : 

// < 1.5
$.ajax({

　　　　url: "test.html",

　　　　success: function(){
　　　　　　alert("哈哈，成功了！");
　　　　},

　　　　error:function(){
　　　　　　alert("出错啦！");
　　　　}

　　});
Si la version de

est inférieure à jquery, alors le 1.5 renvoyé , donc les opérations de chaînage ne sont pas possibles, mais pour les versions supérieures à 1.5, les objets XHR对象 sont renvoyés et les opérations de chaînage sont possibles. Deferred

// >=1.5
$.ajax("test.html")
    .done(function(){
        
    })
    .fail(function(){
        
    })
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.

3. 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 exécuter une autre fonction de rappel, que dois-je faire ? 

$.ajax("test.html")

　　.done(function(){ alert("哈哈，成功了！");} )

　　.fail(function(){ alert("出错啦！"); } )

　　.done(function(){ alert("第二个回调函数！");} );
4. 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. écrire moins que. C'est $.when()

$.when($.ajax("test1.html"), $.ajax("test2.html"))

　　.done(function(){ alert("哈哈，成功了！"); })

　　.fail(function(){ alert("出错啦！"); });
//$.ajax("test1.html")和$.ajax("test2.html")，如果都成功了，就运行done()指定的回调函数；如果有一个失败或都失败了，就执行fail()指定的回调函数。
5. Extension d'interface de fonction de rappel pour les opérations courantes

Il étend cet ensemble d'interface de fonction de rappel de l'opération 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. 

// 一个耗时操作
var wait = function(){
    var task = function(){
        alert('执行了');
    };
    setTimeout(5000);
}
Nous y ajoutons un rappel. Nous pouvons penser à $.when();

$.when(wait())

　　.done(function(){ alert("哈哈，成功了！"); })

　　.fail(function(){ alert("出错啦！"); });
Mais cela n'a aucun effet done est exécuté immédiatement car $.when( ) Ce qui est accepté est un objet différé. Améliorons-le donc encore

var dtd = $.Deferred();
var wait = function(){
    var task = function(){
        alert('执行了');
        dtd.resolve(); // 改变deferred对象的执行状态
    };
    setTimeout(task, 5000);

    return dd;
}
De cette façon, wait() renvoie un objet différé, qui peut être opéré sur la chaîne. 

$.when(wait())

　　.done(function(){ alert("哈哈，成功了！"); })

　　.fail(function(){ alert("出错啦！"); });
6. defferred.resolve() et defferred.reject()

deferred adopte le principe de Promise. Ici, nous devons être clairs sur la notion de statut d’exécution. Dans l'objet différé, il y a trois états,

未完成 已完成已失败

Si l'état d'exécution est

(résolu), l'objet différé appelle immédiatement la fonction de rappel spécifiée par "已完成" ; done()方法Si l'état d'exécution est
, appelez la fonction de rappel spécifiée par la méthode "已失败" fail()Si l'état d'exécution est
, continuez d'attendre ou appelez la fonction de rappel spécifiée par "未完成". 🎜> méthode (ajoutée dans la version jQuery 1.7). progress()

change le statut de defferred.resolve() à 未完成. ==> done()已完成
change le statut de defferred.reject() à 未完成. ==> fail()已失败

var dtd = $.Deferred(); // 新建一个Deferred对象
    var wait = function(){

　　　　var tasks = function(){

　　　　　　alert("执行完毕！");

　　　　　　dtd.resolve(); // 改变Deferred对象的执行状态

　　　　};

　　　　setTimeout(tasks,5000);

　　　　return dtd; // 返回promise对象

　　};



　　$.when(wait())

　　.done(function(){ alert("哈哈，成功了！"); })

　　.fail(function(){ alert("出错啦！"); });

　　dtd.resolve();// 这里会立即先执行一次
7. defferred.promise();

La méthode ci-dessus présente quelques problèmes. Par exemple, dtd est une variable globale et elle peut être utilisée. en externe. L'état du bord est contrôlé à tout moment, ce qui entraînera l'exécution de done() ou fail() plus d'une fois.

Ce n'est évidemment pas ce que nous voulons, nous avons donc besoin de l'aide de defferred.promise.

Sa fonction est de renvoyer un autre objet différé sur l'objet différé d'origine. Ce dernier n'ouvre que les méthodes sans rapport avec le changement de statut d'exécution (comme la méthode done() et la méthode fail()), le blindage et les changements de statut d'exécution. -méthodes liées (telles que la méthode solve() et la méthode rejet()), afin que l'état d'exécution ne puisse pas être modifié. 
var wait = function(dtd){

　　　　var dtd = $.Deferred(); //在函数内部，新建一个Deferred对象

　　　　var tasks = function(){

　　　　　　alert("执行完毕！");

　　　　　　dtd.resolve(); // 改变Deferred对象的执行状态

　　　　};

　　　　setTimeout(tasks,5000);

　　　　return dtd.promise(); // 返回promise对象

　　};

    var dd = wait();
    // dd.resolve(); // 这里如果使用了的话，就会报错的哦，因为返回deferred.promise（）是无法对状态修改的哦
　　$.when(dd)

　　.done(function(){ alert("哈哈，成功了！"); })

　　.fail(function(){ alert("出错啦！"); });
8. $.Defferred(wait)

Une autre façon d'empêcher les changements d'état d'exécution est d'utiliser $.Defferred()

var dtd = $.Deferred(); // 新建一个Deferred对象

　　var wait = function(dtd){

　　　　var tasks = function(){

　　　　　　alert("执行完毕！");

　　　　　　dtd.resolve(); // 改变Deferred对象的执行状态

　　　　};

　　　　setTimeout(tasks,5000);

　　　　return dtd;

　　};
var ddd = wait();
// dd.resolve(); //这里报错了哦
$.Deferred(dd)

　　.done(function(){ alert("哈哈，成功了！"); })

　　.fail(function(){ alert("出错啦！"); });
9. d'objets différés

  • $.Deferred() génère un objet différé.

  • deferred.done() spécifie la fonction de rappel lorsque l'opération réussit

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

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

  • deferred.resolve(args) 手动改变deferred对象的运行状态为"已完成"，从而立即触发done()方法。解决Deferred（延迟）对象，并根据给定的args参数调用任何完成回调函数（doneCallbacks）。

  • deferred.resolveWith()    解决Deferred（延迟）对象，并根据给定的 context和args参数调用任何完成回调函数（doneCallbacks）。

  • deferred.reject(args) 这个方法与deferred.resolve()正好相反，调用后将deferred对象的运行状态变为"已失败"，从而立即触发fail()方法。拒绝Deferred（延迟）对象，并根据给定的args参数调用任何失败回调函数（failCallbacks）。这里的args是一个对象。

  • deferred.rejectWith(context, args)  拒绝Deferred（延迟）对象，并根据给定的 context和args参数调用任何失败回调函数（failCallbacks）。这里的args是一个数组类型。

  • $.when() 为多个操作指定回调函数。除了这些方法以外，deferred对象还有二个重要方法，上面的教程中没有涉及到。Context（上下文） 作为 this对象传递给失败回调函数（failCallbacks ）

  • 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("已执行！");} );

  • deferred.state() 确定一个Deferred（延迟）对象的当前状态。

  1. "pending": Deferred对象是尚未完成状态 (不是 "rejected" 或 "resolved").

  2. "resolved": Deferred对象是在解决状态，这意味着，deferred.resolve() 或者 deferred.resolveWith()被对象访问和doneCallbacks被访问（或在被调用的过程中）

  3. "rejected": Deferred对象是在被拒绝的状态，这意味着，deferred.reject() 或者 deferred.rejectWith() 被对象访问和failCallbacks被访问（或在被调用的过程中） 。

这种方法主要是用在调试，例如，在准备拒绝（reject）一个延迟对象前，判断它是否已经处于 resolved 状态。

十、使用实例

情景1：当用户按下删除弹窗的确定或取消后，把弹窗隐藏，并执行对应的操作（删除或不执行），因为我们不知道用户什么时候会点击按钮，所以不能让弹窗阻塞其他任务的执行。

function pop(arg) {
      if (!arg) {
        console.error('pop title is empty');
      }
      var dfd = $.Deferred() //实例化一个延迟对象 
        ,
        confirmed //记录按下确定或取消 
        , $confirm = $content.find('button.confirm') //确认按钮 
        ,
        $cancel = $content.find('button.cancel'); //取消按钮 

      //定时器轮询，当按下确定或取消时触发删除或取消操作 
      timer = setInterval(function() {
        if (confirmed !== undifined) {
          dfd.resolve(confirmed);
          clearInterval(timer);
          dismiss_pop();
        }
      }, 50);
      //点击确定时更改confirmed状态 
      $confirm.on('click', function() {
        confirmed = true;
      });
      //点击取消时更改confirmed状态 
      $cancel.on('click', function() {
        confirmed = false;
      }); //返回dfd对象
      return dfd.promise();
    }
    $('.delete').click(function() {
      var $this = $(this);
      var index = $this.data('index');
      //当前的id //确定删除
      pop('确定删除？').then(function(res) {
        res ? delete_task(index) : null;
      })
    })

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：En savoir plus sur la mise en mémoire tampon des données dans le code source jQueryArticle suivant：En savoir plus sur la mise en mémoire tampon des données dans le code source jQuery

Articles Liés

Voir plus