jquery中的deferred

Posted 2021-03-02 mosakashaka

熟悉的东西，长时间不用很快也就忘了，挺多还蛮可惜的。。

deferred之前用过不少次，这次心血来潮总结一下，主要还是参考阮老师的这篇文章。

deferred对象被jquery推出，作为操作回调的一种方式。

譬如ajax请求，如果想在请求成功后执行某些操作，比较常见的方法是在配置中定义好`success()`回调函数。

如果利用$.ajax的deferred方式，$.ajax()会返回一个deferred对象，在该对象后串联需要进行操作，被链入的操作并不会立刻执行，而是在被推迟到特定条件情况下才会触发

• done:被done串联的操作在deferred对象执行成功后被执行
• fail:失败时被执行
• always:操作结束总会执行
• then:done和fail的结合，作为一种简写方式

如：

$.ajax("test.html")
　　.done(function(){ alert("哈哈，成功了！"); })
　　.fail(function(){ alert("出错啦！"); });

之所以称为deferred，应该就是因为这种推迟执行的特性所致。

 

不单单利用jquery已经封装好的deferred组件，也可以自己创建deferred组件，在合适的时机触发成功或失败，从而达到回调的特性。

一个可能在很多地方都见过的例子，通过deferred对象，在外部监控某操作执行完后，进行相应操作：

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("哈哈，成功了！"); })
　　.fail(function(){ alert("出错啦！"); });

• 通过$.Deferred()可以创建deferred对象(假设对象名为dtd)
• 通过dtd.resolve()可以触发成功事件，dtd.reject()则为失败
• dtd.promise()返回一个仅支持done/fail等回调监控的promise对象，该对象屏蔽了resolve/reject等改变状态的方法
• $.when(dtds...)该方法可以监控多个deferred对象，当都成功时才会触发done，而有一个失败时既会触发fail