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
: 非阻塞
. Deferred
Comprendre l'asynchrone
alert(1) setTimeout(function(){ alert(2) },0) alert(3) //alert(1) //alert(3) //alert(2)
deferred
et des opérations synchrones (比如ajax读取服务器数据)
, dont aucune ne peut obtenir de résultats immédiats. (比如遍历一个大型数组)
. 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
// < 1.5 $.ajax({ url: "test.html", success: function(){ alert("哈哈,成功了!"); }, error:function(){ alert("出错啦!"); } });
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(){ })
$.ajax("test.html") .done(function(){ alert("哈哈,成功了!");} ) .fail(function(){ alert("出错啦!"); } ) .done(function(){ alert("第二个回调函数!");} );
$.when($.ajax("test1.html"), $.ajax("test2.html")) .done(function(){ alert("哈哈,成功了!"); }) .fail(function(){ alert("出错啦!"); }); //$.ajax("test1.html")和$.ajax("test2.html"),如果都成功了,就运行done()指定的回调函数;如果有一个失败或都失败了,就执行fail()指定的回调函数。
// 一个耗时操作 var wait = function(){ var task = function(){ alert('执行了'); }; setTimeout(5000); }
$.when(wait()) .done(function(){ alert("哈哈,成功了!"); }) .fail(function(){ alert("出错啦!"); });
var dtd = $.Deferred(); var wait = function(){ var task = function(){ alert('执行了'); dtd.resolve(); // 改变deferred对象的执行状态 }; setTimeout(task, 5000); return dd; }
$.when(wait()) .done(function(){ alert("哈哈,成功了!"); }) .fail(function(){ alert("出错啦!"); });
未完成
已完成
已失败
(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();// 这里会立即先执行一次
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("出错啦!"); });
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("出错啦!"); });
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(延迟)对象的当前状态。
"pending": Deferred对象是尚未完成状态 (不是 "rejected" 或 "resolved").
"resolved": Deferred对象是在解决状态,这意味着,deferred.resolve() 或者 deferred.resolveWith()被对象访问和doneCallbacks被访问(或在被调用的过程中)
"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!