deferred对象

沈建明发布于2019-08-20 16:30 / 1240人阅读

摘要：如果状态是已完成，对象就是调用方法指定的回调函数如果状态是已失败，对象就是调用方法指定的回调函数。四对象的其他方法方法，接受两个参数，第一个参数是方法的回调函数第二个参数是方法的回调函数。

deferred对象

deferred对象就是jQuery的回调函数解决方案

javascript中有一些操作比较耗时，如ajax操作，面对这样的情况，我们通常会指定回调函数。所谓回调函数就当这些操作结束后，应该调用哪些函数。

一、传统的ajax操作

$.ajax({
    url : index.html,
    success : function(){
        alert("success");
    },
    error : function(){
        alert("fail");
    }  
});

这里的success方法指定了操作成功后的回调函数，fail方法指定了操作失败后的回调函数。下面我们再来看一下，用deferred对象，写法是怎样的？

二、deferred对象的链式操作

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

这里的done()相当于success方法，fail()相当于error方法。这种链式写法很清晰、可读性也很强。deferred对象的强大还不止于此。

1、deferred对象可以为一个操作指定多个回调函数。

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

像上面这样，我们可以指定任意多个回调函数，这些回调函数按顺序执行。

2、为多个操作指定回调函数

$.when($.ajax("index1.html"),$.ajax("index.html"))
.done(function(){alert("success");})
.fail(function(){alert("fail");});

这里我们用到了$.when()方法，这个方法的参数是deferred对象，这段代码的意思是只有两个操作都成功了，才运行done()指定的回调函数，其他情况运行fail()指定的回调函数.

三、普通操作的回调函数

deferred对象最大的有点在于，对于ajax操作、本地操作；异步操作、同步操作，都可以使用deferred对象的方法指定回调函数.

比如说有一个很耗时的操作wait:

var wait=function(){
    var tasks=function(){
        alert("执行完毕");
    }
    setTimeout(tasks,5000); //真的很耗时
}

如果我们想为这个函数指定回调函数，应该怎么做呢？我们首先来深入的了解一下deferred对象.

1、三种执行状态

deferred对象有三种执行状态：未完成、已完成、已失败。如果状态是已完成，deferred对象就是调用done()方法指定的回调函数；如果状态是已失败，deferred对象就是调用fail()方法指定的回调函数。deferred.resolve()方法将执行状态从未完成改为已完成，从而调用done()方法；deferred.reject()方法将执行状态从未完成改为已失败，从而调用fail()方法。

2、改变状态

前面提到的ajax操作，deferred对象会根据返回的结果，自动改变自身的状态；但在wait函数中，需要手动改变 deferred的执行状态，从而触发相关回调函数。

3、deferred.promise()方法

deferred.promise()的作用是在原来deferred对象上返回另一个deferred对象，后者只开放与执行状态无关的方法(如 done() 方法和 fail() 方法)，屏蔽改变执行状态有关的方法(如 resolve()方法reject() 方法)。

了解了以上三点之后，我们来为wait()函数指定回调函数。

var wait=function(){
    var dfd=$.Deferred(); //在函数内部创建一个deferred对象
    var tasks=function(){
        alert("执行完毕");
        dfd.resolve(); //改变执行状态
    }
    setTimeout(tasks,5000);
    return dfd.promise(); //返回promise对象
};

$.when(wait())
.done(function(){alert("success");})
.fail(function(){alert("fail");})

这里有三点需要注意：

最好在函数的内部创建deferred对象，这样可以防止在外部修改deferred对象的执行状态。

最好返回promise对象，还是防止执行状态在函数外部被改变。

要在合适的时候改变deferred对象的执行状态，一般是在耗时的操作执行完之后，改变deferred对象的执行状态。

这样我们就完成了为普通操作添加回调函数。

四、deferred对象的其他方法

deferred.then()方法，接受两个参数，第一个参数是done()方法的回调函数；第二个参数是fail()方法的回调函数。具体写法如下：

$.when($.ajax("index.html"))
.then(successFunction , failFunction);

这样省力了一下呢！

deferred.resolve(arg)方法是可以接受参数的，这个参数将会传递给通过deferred.then或deferred.done 添加的doneCallbacks

本文主要简单的介绍了一下deferred对象的使用场景和使用方法。

关于deferred对象的其他方法，请大家查看jquery官方文档

我在学习过程中阅读的相关文献

云服务器 GPU云服务器 jquery_deferred对象 deference Deferred defer

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82957.html

jquery 中的 deferred 对象

摘要：中文文档简单说，对象就是的回调函数解决方案。为了让回调函数的名字统一，便于在中使用。普通操作的回调函数接口对象的最大优点，就是它把这一套回调函数接口，从操作扩展到了所有操作。指定操作成功时的回调函数。参考链接 jQuery API中文文档 jQuery.Deferred jQuery.when jQuery的deferred对象详解 jQuery deferred 对象的 prom...

Meathill 2019-08-23 16:26 评论0 收藏0
jQuery的deferred对象详解

摘要：通常的做法是，为它们指定回调函数。简单说，对象就是的回调函数解决方案。指定操作成功时的回调函数指定操作失败时的回调函数没有参数时，返回一个新的对象，该对象的运行状态无法被改变接受参数时，作用为在参数对象上部署接口。转自：阮一峰：http://www.ruanyifeng.com/blo... 一、什么是deferred对象？开发网站的过程中，我们经常遇到某些耗时很长的javascri...

lei___ 2019-08-20 15:52 评论0 收藏0
jQuery Deferred对象

摘要：给普通的操作指定回调函数对象的最大优点，就是它把这一套回调函数接口，从操作扩展到了所有操作。方法用于指定对象状态为已失败时的回调函数。执行完毕执行成功执行失败接收一个或多个对象作为参数，为其指定回调函数。什么是deferred对象开发网站的过程中，我们经常遇到某些耗时很长的javascript操作。其中，既有异步的操作（比如ajax读取服务器数据），也有同步的操作（比如遍历一个大型...

baoxl 2019-08-20 15:28 评论0 收藏0
读Zepto源码之Deferred模块

摘要：为的项，取出来的分别为和，所以上的和方法，调用的是中的方法，实质是往各自的回调列表中添加回调函数。进度回调函数数组。参数为异步对象的索引值，参数为对应的上下文数组，即或，为对应的回调函数数组，即或。 Deferred 模块也不是必备的模块，但是 ajax 模块中，要用到 promise 风格，必需引入 Deferred 模块。Deferred 也用到了上一篇文章《读Zepto源码之C...

yagami 2019-08-20 18:25 评论0 收藏0
$.when().done().then()的用法

摘要：通常的做法是，为它们指定回调函数。指定操作成功时的回调函数指定操作失败时的回调函数没有参数时，返回一个新的对象，该对象的运行状态无法被改变接受参数时，作用为在参数对象上部署接口。 jQuery的开发速度很快，几乎每半年一个大版本，每两个月一个小版本。每个版本都会引入一些新功能。今天我想介绍的，就是从jQuery 1.5.0版本开始引入的一个新功能----deferred对象。这个功...

KoreyLee 2019-08-23 12:15 评论0 收藏0