13518219792
网站建设资讯

NEWS

网站建设资讯

jquery延迟对象怎么使用

这篇文章主要介绍“jquery延迟对象怎么使用”，在日常操作中，相信很多人在jquery延迟对象怎么使用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”jquery延迟对象怎么使用”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

为民权等地区用户提供了全套网页设计制作服务，及民权网站建设行业解决方案。主营业务为成都网站设计、成都网站建设、民权网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

jquery延迟对象是“Deferred”，是通过调用jQuery.Deferred()方法来创建的可链接的实用对象。延迟对象是可链接的，类似于一个jQuery对象可链接的方式，区别于它有自己的方法；它可注册多个回调函数到回调列表，调用回调列表并且传递异步或同步功能的成功或失败的状态。

jQuery 1.5中介绍了 Deferred 延迟对象，它是通过调用 jQuery.Deferred() 方法来创建的可链接的实用对象。它可注册多个回调函数到回调列表，调用回调列表并且传递异步或同步功能的成功或失败的状态。

延迟对象是可链接的，类似于一个 jQuery 对象可链接的方式，区别于它有自己的方法。在创建一个 Deferred 对象之后，您可以使用以下任何方法，直接链接到通过调用一个或多个的方法创建或保存的对象。

列表

函数说明
$.Deferred()用来返回一个链式实用对象方法来注册多个回调，并且调用回调队列，传递任何同步或异步功能成功或失败的状态。
deferred.always()用于当Deferred（延迟）对象被受理或被拒绝时，调用添加的处理程序
deferred.done()用于当Deferred（延迟）对象被受理时，调用添加的处理程序
deferred.fail()用于当 Deferred （延迟）对象被拒绝时，调用添加的处理程序
deferred.progress()用于当Deferred（延迟）对象生成进度通知时，调用添加处理程序
deferred.isRejected()1.8-用来确定 Deferred 对象是否已被拒绝
deferred.isResolved()1.8-用来确定 Deferred 对象是否已被拒绝
deferred.notify()用于传递参数给进行中的回调
deferred.notifyWith()用于传递参数，上下文对象给进行中的回调
deferred.reject()用于拒绝延迟对象，并传递参数给失败回调函数
deferred.rejectWith()用于拒绝延迟对象，并传递参数和上下文对象给失败回调函数
deferred.resolve()用于解决延迟对象，并并传递参数给doneCallbacks 回调函数
deferred.resolveWith()用于解决延迟对象，并并传递参数和上下文对象给doneCallbacks 回调函数
deferred.state()用于确定一个Deferred（延迟）对象的当前状态
deferred.pipe()用于过滤状态或通过函数返回的延迟对象的值
deferred.then()用于当Deferred（延迟）对象被解决，拒绝或仍在进行中时，调用添加处理程序。
deferred.catch()用于当Deferred对象被拒绝(reject)时，调用添加的处理程序。
deferred.promise()用于返回 Deferred(延迟)的 Promise 对象
.promise()用于返回一个 Promise 对象，观察某种类型被绑定到集合的所有行动，是否已被加入到队列中。

说明

$.Deferred()

$.Deferred() 是一个构造函数，用来返回一个链式实用对象方法来注册多个回调，并且调用回调队列，传递任何同步或异步功能成功或失败的状态。

提示：

  • $.Deferred() 构造函数创建一个新的 Deferred（延迟）对象， jQuery.Deferred
    可传递一个可选的函数，该函数在构造方法返回之前被调用并传递一个新的 Deferred 对象作为函数的第一个参数。例如被调用的函数可以使用 deferred.then（）来附加回调函数。

  • 一个 Deferred 对象开始于挂起状态。任何使用 deferred.then(), deferred.always(),
    deferred.done(), 或者 deferred.fail() 添加到这个对象的回调函数都是排队等待执行的。

调用 deferred.resolve() 或 eferred.resolveWith() 转换延迟到解决状态后立即执行设置的
doneCallbacks 。
调用 deferred.reject() 或 deferred.rejectWith() 转换延迟到拒绝状态后立即执行设置的 failCallbacks 。一旦对象已经进入了解决或拒绝状态，它保持该状态。回调仍然可以添加到已解决或已拒绝的 Deferred 对象——它们会立即执行。

语法

  • $.Deferred( [beforeStart ] )

jQuery1.5新增该函数

参数说明

参数说明
beforeStartFunction类型个在构造函数返回之前调用的函数

返回值

jQuery.Deferred()工厂函数创建一个新的deferred对象。

deferred.always()

当Deferred（延迟）对象被受理或被拒绝时，调用通过deferred.always() 添加的处理程序。

提示：参数可以是一个函数或一个函数数组。由于 deferred.always() 返回的是一个 Deferred 对象，所以可以连接其他的延迟对象方法(这里是指可以继续调用Deferred对象的方法)，包括额外的 .always 方法。 当 Deferred 对象得到解决或被拒绝时，通过deferred.always() 添加的回调函数按它们被添加时的顺序执行，并且可以作为参数传递给如下的方法使用：resolve ， reject ， resolveWith 或 rejectWith。

语法

  • deferred.always( alwaysCallbacks [, alwaysCallbacks ] )

jQuery1.6新增该函数

参数说明

参数说明
alwaysCallbacks可选/Function类型一个函数或者函数数组，当Deferred（延迟）对象得到解决或被拒绝时被调用

注意: deferred.always()方法接收了Deferred对象.resolve()或.reject()使用的参数， 这往往是非常不同的。 为此， 最好的只用它的行为，而不去检查他的参数。 在大多数情况下， 使用显式 .done() 或 .fail()处理程序，因为他们的参数都是已知的。

返回值

deferred.always()返回Deferred（延迟）对象

示例&说明

jQuery.get（）方法返回一个来自一个Deferred（延迟）对象的jqXHR对象，我们可以附加一个成功和错误使用deferred.always（）方法的回调,jQuery示例代码:

 $.get( "test.php" ).always(function() {
    alert( "带有成功和错误的回调参数的$.get方法已完成。" );
 })

deferred.done()

当Deferred（延迟）对象被受理时，调用通过延迟对象函数deferred.done()添加的处理程序。

提示：该方法接受一个或者多个参数。deferred.done() 返回的是一个 Deferred 对象， 可以连接其他的延迟对象方法（继续调用Deferred 对象的方法），包括额外的 .done() 方法。当Deferred 对象得到解决时，通过deferred.done()添加的回调函数按它们被添加时的顺序执行，并且可以作为参数传递给如下的方法使用：resolve，resolveWith。

语法

  • deferred.done( doneCallbacks [, doneCallbacks ] )

jQuery1.5新增该函数

参数说明

参数说明
doneCallbacks可选/Function类型一个函数或者函数数组，当Deferred（延迟）对象得到解决时被调用

返回值

deferred.done() 返回的是一个 Deferred 对象

示例&说明

HTML示例代码:

 
 
Ready...

jQuery示例代码

function fn1() {
  $("p").append(" 1 ");
}
function fn2() {
  $("p").append(" 2 ");
}
function fn3(n) {
  $("p").append(n + " 3 " + n);
}

var dfd = $.Deferred();//创建一个延迟对象

//添加dfd被解决时需要的被调用的处理函数
dfd
.done( [fn1, fn2], fn3, [fn2, fn1] )// 连接一个函数或者函数数组
.done(function(n) {//可以连接其他的方法
  $("p").append(n + " we're done.");
});

//当点击按钮时修改延迟对象的状态为已解决
//此时调用通过deferred.done()添加的延迟对象被受理后的处理函数
$("button").bind("click", function() {
  dfd.resolve("and");//输出：1 2 and 3 and 2 1 and we're done.
});

deferred.fail()

当 Deferred （延迟）对象被拒绝时，调用通过deferred.fail()添加的处理程序。

提示：该方法接受一个或者多个参数。 deferred.fail() 返回的是一个 Deferred 对象， 可以连接其他的延迟对象方法（继续调用其他Deferred 对象的方法），包括额外的 .fail() 方法。当 Deferred 对象被拒绝时，通过deferred.fail()添加的回调函数 按它们被添加时的顺序执行，并且可以作为参数传递给如下的方法使用：deferred.resolve() 或 deferred.rejectWith()。

语法

  • deferred.fail( failCallbacks [, failCallbacks ] )

jQuery1.5新增该函数

参数说明

参数说明
failCallbacks可选/Function类型一个函数或者函数数组，当Deferred（延迟）对象被拒绝时被调用

返回值

deferred.fail() 返回的是一个 Deferred 对象

示例&说明

jQuery示例代码

$(function () { 
    $.get("test.php")
        .done(function(){ alert("$.get 成功！"); })//解决时调用
        .fail(function(){ alert("$.get 失败!"); });//被拒绝时调用
})

deferred.progress()

deferred.progress() 函数当Deferred（延迟）对象生成进度通知时，调用添加处理程序。

注意：当通过调用 notify 或 notifyWith 使延迟对象产生进度通知时，progressCallbacks 就会被调用。 由于 deferred.progress()返回的是延迟对象，所以其它延迟对象方法可以链接到该对象上(链式调用)。当延迟对象被 resolved 或 rejected 时， 进度回调函数将不再被调用,但是当Deferred （延迟）进入resolved（解决） 或 rejected（拒绝）状态后，新添加任何的progressCallbacks将立即执行，使用的参数被传递给.notify() 或 notifyWith()调用

语法

  • deferred.progress( progressCallbacks[,progressCallbacks] )

jQuery 1.7 新增该函数

参数说明

参数说明
progressCallbacks可选/Function类型一个函数或者函数数组，当Deferred（延迟）对象生成正在执行中的进度通知时被调用。

返回值

deferred.progress() 返回的是一个 Deferred 对象

deferred.isRejected()

deferred.isRejected() 函数用来确定 Deferred 对象是否已被拒绝。

从jQuery1.7开始已经过时，请使用 deferred.state() 代替。

注意：

  • 如果 Deferred（延迟）对象是在被拒绝的状态，则返回 true。这意味着 deferred.reject() 或者deferred.rejectWith() 已经在对象上被调用过，并且 failCallbacks 已经被调用过（或者正处于被调用的阶段）。

  • Deferred（延迟）对象可以有三种状态：挂起（pending），解决（resolved），或拒绝（rejected）;使用 deferred.isResolved() 来判断延迟对象是否在解决状态。

语法

  • deferred.isRejected()

jQuery 1.5 新增该函数,1.7过时，1.8移除

返回值

deferred.isRejected() 返回的是一个 Boolean类型

deferred.isResolved()

deferred.isResolved() 函数用来确定 Deferred 对象是否已被解决。

从jQuery1.7开始已经过时，请使用 deferred.state() 代替。

注意：

  • 如果 Deferred（延迟）对象是在被解决的状态，则返回 true。这意味着 deferred.resolve() 或者 deferred.resolveWith() 已经在对象上被调用过，并且 doneCallbacks 已经被调用过（或者正处于被调用的阶段）。

  • Deferred（延迟）对象可以有三种状态：挂起（pending），解决（resolved），或拒绝（rejected）;使用 deferred.isRejected() 来判断延迟对象是否在拒绝状态。

语法

  • deferred.isResolved()

jQuery 1.5 新增该函数,1.7过时，1.8移除

返回值

deferred.isResolved() 返回的是一个 Boolean类型

deferred.notify()

deferred.notify() 函数用于定一个参数，传递给正在调用的延迟对象上的回调函数 ( progressCallbacks )。

注意：

  • 通常，只有延迟对象（Deferred）的创建者才能调用此方法。

  • 你可以通过调用 deferred.promise() 返回一个受限的 Promise 对象，来阻止其它代码改变延迟对象的状态或报告它的状态。

  • 当 deferred.notify 被访问时， 任何 progressCallbacks 可以通过访问 deferred.then 或者 deferred.progress 来添加。回调依照他们添加时的顺序执行。

通过来自.notify()的传递参数给正在调用的延迟对象上的回调函数，当迟延对象已经被
resolved 或被 rejected 之后，再调用任何 .notify() (或者添加 progressCallbacks) 都会
被忽略

语法

  • deferred.notify( args )

jQuery 1.7 新增该函数

参数说明

参数说明
args可选/Object类型传递一个可选的参数给进行中的回调（progressCallbacks）

返回值

deferred.notify() 返回的是一个 Deferred 对象

小知识

jQuery提供的deferred.promise()方法的作用是，在原来的Deferred 对象上返回另一个 Deferred 对象，即受限制的 Promise 对象，受限制的 Promise 对象只开放与改变执行状态无关的方法（比如done()方法和fail()方法），屏蔽与改变执行状态有关的方法（比如resolve()方法和reject()方法），从而使得执行状态不能被改变。

首先看一个 Deferred对象的执行状态被改变的例子：

var dtd = $.Deferred(); // 新建一个Deferred对象
var wait = function(dtd){
  var tasks = function(){
    alert("执行完毕！");
    dtd.resolve(); // 改变Deferred对象的执行状态
  };
  setTimeout(tasks,5000);
  return dtd;
};
$.when(wait(dtd))
.done(function(){ alert("等待执行！"); })
.fail(function(){ alert("出错啦！"); });
//代码的尾部加了一行dtd.resolve()，这就改变了dtd对象的执行状态，因此导致done()方法立刻执行
dtd.resolve();// 改变Deferred对象的执行状态

再看一个 Deferred对象返回deferred.promise()的例子：

var wait = function(){
  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("出错啦！"); });

wait()函数返回的是promise对象。dtd.promise().resolve()方法不存在,因此无法改变状态，然后，我们把回调函数绑定在这个对象上面，而不是原来的deferred对象上面。

这样的好处是，无法改变promise对象的执行状态，要想改变执行状态，只能操作原来的deferred对象。

deferred.notifyWith()

deferred.notifyWith() 函数用于给定上下文和参数，传递给正在调用的延迟对象上进行的回调函数( progressCallbacks )。

注意：

  • 通常，只有延迟对象（Deferred）的创建者才能调用此方法。

  • 你可以通过调用 deferred.promise() 返回一个受限的 Promise 对象，来阻止其它代码改变延迟对象的状态或报告它的状态。

  • 当 deferred.notifyWith 被调用时， 任何 progressCallbacks 可以通过访问 deferred.then 或者 deferred.progress 来添加。回调 依照他们添加时的顺序执行。

通过 .notifyWith() 传递参数给每个回调函数，当迟延对象已经被 resolved 或被
rejected 之后，再调用任何 .notifyWith() (或者添加 progressCallbacks) 都会被忽略。

语法

  • deferred.notifyWith( context [, args ] )

jQuery 1.7 新增该函数

参数说明

参数说明
contextObject类型作为this对象，传递给进行中的回调（progressCallbacks）
argsArray类型传递一个可选的参数给进行中的回调（progressCallbacks）

返回值

deferred.notifyWith() 返回的是一个 Deferred 对象

deferred.reject()

deferred.reject() 函数用于拒绝延迟对象，并根据给定的参数调用任何 failCallbacks 回调函数。

注意：

  • 通常只有延迟对象的创建者才可以调用该方法。你可以通过调用 deferred.promise()，返回一个受限的 Promise 对象，来阻止其它代码改变延迟对象的状态或报告它的状态。

  • 当延迟对象被 rejected 时，任何通过 deferred.then 或 deferred.fail 添加的 failCallbacks，都会被调用。回调函数按它们被添加时的顺序执行。传递给 deferred.reject() 的 args 参数，会传给每个回调函数。当延迟对象进入 rejected 状态后，任何 failCallbacks 被添加时，就会被立刻执行，并带上传入给 .reject() 的参数。

语法

  • deferred.reject( args )

jQuery1.5新增该函数

参数说明

参数说明
argsObject类型传递一个可选的参数给失败的回调（failCallbacks）

返回值

deferred.reject() 返回的是一个 Deferred 对象

deferred.rejectWith()

deferred.rejectWith() 函数用于拒绝延迟对象，并根据给定的 context 和 args 参数调用任何 failCallbacks 回调函数。

注意：

  • 通常只有延迟对象的创建者才可以调用该方法。你可以通过调用 deferred.promise()，返回一个受限的 Promise 对象，来阻止其它代码改变延迟对象的状态或报告它的状态。

  • 当延迟对象被 rejected 时，任何通过 deferred.then 或 deferred.fail 添加的 failCallbacks，都会被调用。回调函数按它们被添加时的顺序执行。传递给 deferred.reject() 的 args 参数， 会传给每个回调函数。当延迟对象进入 rejected 状态后，任何 failCallbacks 被添加时，就会被立刻执行，并带上传入给 .reject() 的参数。

语法

  • deferred.rejectWith( context [, args ] )

jQuery1.5新增该函数

参数说明

参数说明
contextObject类型传递一个对象给失败的回调（failCallbacks）
argsArray类型传递一个可选的参数给失败的回调（failCallbacks）

返回值

deferred.rejectWith() 返回的是一个 Deferred 对象

deferred.resolve()

deferred.resolve() 函数用于解决Deferred（延迟）对象，并根据给定的args参数给完成回调函数doneCallbacks 。

注意：

  • 通常只有延迟对象的创建者才可以调用该方法。你可以通过调用 deferred.promise()，返回一个受限的 Promise 对象，来阻止其它代码改变延迟对象的状态或报告它的状态。

  • 当延迟对象被 resolved 时，任何通过 deferred.then 或 deferred.done 添加的 doneCallbacks，都会被调用。回调函数按它们被添加时的顺序执行。传递给 deferred.resolve() 的 args 参数， 会传给每个回调函数。当延迟对象进入 resolved 状态后，任何 doneCallbacks 被添加时，就会被立刻执行，并带上传入给 .resolve() 的参数。

语法

  • deferred.resolve( args )

jQuery1.5新增该函数

参数说明

参数说明
argsObject类型传递一个可选的参数给完成回调函数（doneCallbacks）

返回值

deferred.resolve() 返回的是一个 Deferred 对象

deferred.resolveWith()

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

注意：

  • 通常只有延迟对象的创建者才可以调用该方法。你可以通过调用 deferred.promise()，返回一个受限的 Promise 对象，来阻止其它代码改变延迟对象的状态或报告它的状态。

  • 当延迟对象被 resolved 时，任何通过 deferred.then 或 deferred.done 添加的 doneCallbacks，都会被调用。回调函数按它们被添加时的顺序执行。传递给 deferred.resolve() 的 args 参数， 会传给每个回调函数。当延迟对象进入 resolved 状态后，任何 doneCallbacks 被添加时，就会被立刻执行，并带上传入给 .resolve() 的参数。

语法

  • deferred.resolveWith( context [, args ] )

jQuery1.5新增该函数

参数说明

参数说明
contextObject类型传递上下文对象给完成回调函数（doneCallbacks）
argsArray类型传递一个可选的参数给完成回调函数（doneCallbacks）

返回值

deferred.resolveWith() 返回的是一个 Deferred 对象

deferred.state()

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

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

注意：
deferred.state() 方法返回一个字符串，代表Deferred（延迟）对象的当前状态。Deferred 对象可以在三种状态之一：

  • “pending” : Deferred 对象是尚未完成状态 。

  • “resolved” : Deferred 对象是在解决状态，这意味着对象的 deferred.resolve() 或者
    deferred.resolveWith()已被调用并且 doneCallbacks 已被调用（或在被调用的过程中）

  • “rejected” : Deferred 对象是在被拒绝的状态，这意味着对象的 deferred.reject() 或者
    deferred.rejectWith() 已被调用并且 failCallbacks 已被调用（或在被调用的过程中） 。

语法

  • deferred.state()

jQuery1.7 新增该函数

返回值

deferred.state() 返回的是一个 String类型

deferred.pipe()

deferred.pipe() 函数用于过滤 and/or 链式延迟对象的工具方法。

注意：从jQuery 1.8开始, deferred.pipe() 方法过时。使用 deferred.then() 代替它。

从jQuery 1.8开始, deferred.pipe() 方法过时. 应该使用deferred.then() 代替它。

deferred.pipe()方法返回一个新的Promise对象，用于过滤状态或通过函数返回的延迟对象的值，传递给Promise对象对应的done()、fail() 方法
doneFilter和failFilter函数过滤原先deferred（延迟）的解决/拒绝的状态和值。
从 jQuery 1.7开始,该方法还接受一个progressFilter函数，用来过滤任何访问deferred（延迟）的notify或notifyWith 方法。

这些过滤器可以随着 pipe()返回的 promise 对象的 done()或fail() 回调函数的调用，返回一个新值，或返回其它可见对象(Deferred, Promise, 等等)，这些可见对象传递了自身的解决（resolve) / 拒绝(reject)状态和传递给 pipe promise 回调函数的返回的值。

如果将 null 作为过滤函数，或者不指定过滤函数，那么 pipe promise 被受理（resolve)或被拒绝(reject)时，会使用相同的值作为原始值。

语法

  • deferred.pipe( [doneFilter ] [, failFilter ] )

jQuery1.6新增该函数,1.8过时

  • deferred.pipe( [doneFilter ] [, failFilter ] [, progressFilter ] )

jQuery1.7新增该函数，1.8过时

参数说明

参数说明
doneFilterFunction类型可选函数，当延迟得到解决时调用
failFilterFunction类型可选函数，当延迟被拒绝时调用
progressFilterFunction类型可选函数，当进度通知发送给Deferred（延迟）被调用

返回值

deferred.pipe() 返回的是一个 * Promise对象*

示例&说明

过滤解决值:

var defer = $.Deferred(),
   filtered = defer.pipe(function( value ) {//当延迟对象解决时被调用
       // 传递给 pipe promise 回调函数的返回的值为10
        return value * 2;
    });
defer.resolve( 5 );//延迟对象被解决  调用pipe() return 10
filtered.done(function( value ) {//filtered 传递之前返回的值 10
    alert( "值是(2*5 =) 10: " + value );//弹出框输出：值是(2*5 =) 10:10
});

过滤拒绝值:

var defer = $.Deferred(),
//延迟得到解决时调用回调函数为null
//延迟得到拒绝的回调函数传递值value * 3 给Promise对象filtered 的fail的回调函数
        filtered = defer.pipe( null, function( value ) {
            return value * 3;
        });

    defer.reject( 6 );//延迟对象被拒绝 调用pipe() return 18
    filtered.fail(function( value ) {
     alert( "值是(3*6=)18:" + value );//弹出框输出：值是(3*6 =) 18:18
    });

链任务（？）：

var request = $.ajax( url, { dataType: "json" } ),
    chained = request.pipe(function( data ) {
        //request返回值给url2
        return $.ajax( url2, { data: { user: data.userId } } );
    });

    chained.done(function( data ) {
        // 通过第一个请求取回data值提供给URL2
    });

deferred.then()

deferred.then() 函数当Deferred（延迟）对象被解决/拒绝或仍在进行中时，调用添加处理程序。

注意：

  • 如果没有这种类型的回调是需要的,参数可以为 null 。或者使用.done()，.fail()或者 .progress()设置只有一种未经过滤的状态或值的回调类型。

  • 从jQuery 1.8开始, 方法返回一个新的 promise ，可以通过一个函数过滤延迟对象的状态和值，用来替换现在过时的deferred.pipe() 方法。

  • 回调是依照他们被添加时的顺序执行的，由于 deferred.then 返回 Promise 对象，可以链接其它的 Promise 对象，包括附加的 .then() 方法。

doneFilter 和 failFilter函数过滤原延迟对象的解决/拒绝的状态和值。
progressFilter 函数过滤任何调用原有的延迟对象的notify 和 notifyWith的方法。
这些过滤器函数可以返回一个新的值传递给的 Promise 对象的.done() 或 .fail() 回调，或他们可以返回另一个观察的对象（延迟对象，Promise 对象等）传递给它的解决/拒绝的状态和值,Promise 对象的回调。
如果过滤函数是空，或没有指定，promise（承诺）将得到与原来值相同解决（resolved）或拒绝（rejected）。

语法

  • deferred.then( doneFilter [, failFilter ] [, progressFilter ] )

    jQuery1.8新增该函数

  • deferred.then1.8-( doneCallbacks, failCallbacks)

    jQuery1.5新增该函数,1.8移除

  • deferred.then1.8-( doneCallbacks, failCallbacks[, progressFilter ] )

    jQuery1.7新增该函数,1.8移除

参数说明

参数说明
doneFilterFunction类型可选 当Deferred（延迟）对象得到解决时被调用的一个函数
failFilterFunction类型可选 当Deferred（延迟）对象得到拒绝时被调用的一个函数
progressFilterFunction类型可选 当Deferred（延迟）对象生成进度通知时被调用的一个函数调用
doneCallbacksFunction类型当Deferred（延迟）对象得到解决时被调用的一个函数或函数数组
failCallbacksFunction类型当Deferred（延迟）对象得到拒绝时被调用的一个函数或函数数组
progressCallbacksFunction类型当Deferred（延迟）对象生成进度通知时被调用的一个函数或函数数组

返回值

deferred.then() 返回 Promise 对象

示例&说明

HTML代码：

过滤解决值:

var filterResolve = function() {
    var defer = $.Deferred(),
        //当延迟对象解决时被调用
        //过滤解决值给then()的返回Promise对象的完成回调函数
        filtered = defer.then(function( value ) {
            return value * 2;
        });

    defer.resolve( 5 );

    //添加Promise对象的完成回调函数
    filtered.done(function( value ) {
        $( "p" ).html( "值是 ( 2*5 = ) 10: " + value );
    });
};
$( "button" ).on( "click", filterResolve );

过滤拒绝值:

var defer = $.Deferred(),
//延迟得到解决时调用回调函数为null
//延迟得到拒绝的，回调函数过滤拒绝值 
//传递过滤的拒绝值 value * 3 给then()的返回Promise对象的拒绝回调函数fail
        filtered = defer.then( null, function( value ) {
            return value * 3;
        });

    defer.reject( 6 );//延迟对象被拒绝 调用then() return 18

    //then()的返回Promise对象添加拒绝回调函数，并获取过滤的拒绝值
    filtered.fail(function( value ) {
     alert( "值是(3*6=)18:" + value );//弹出框输出：值是(3*6 =) 18:18
    });

链任务（？）：

var request = $.ajax( url, { dataType: "json" } ),
    chained = request.then(function( data ) {
        //request返回值给url2
        return $.ajax( url2, { data: { user: data.userId } } );
    });

    chained.done(function( data ) {
        // 通过第一个请求取回data值提供给URL2
    });

deferred.catch()

当Deferred对象被拒绝(reject)时，调用通过deferred.catch()添加的处理程序。

deferred.catch( fn ) 是 deferred.then( null, fn )的一个别名

语法

  • deferred.catch( failCallbacks )

jQuery 3.0 新增该函数

参数说明

参数说明
failCallbacksFunction类型一个函数，当 Deferred 对象被拒绝(reject)时被调用

返回值

deferred.catch() 返回的是一个 Promise 对象

示例&说明

jQuery.get 方法返回一个jqXHR对象， 它是从Deferred对象派生的，当Deferred对象被拒绝(reject) 时，我们可以使用.catch方法来处理，jQuery示例代码：

$.get( "test.php" )
  .then( function() {
    alert( "$.get succeeded" );
  } )
  .catch( function() {
    alert( "$.get failed!" );
  } );

deferred.promise()

deferred.promise() 函数返回 Deferred(延迟)的 Promise 对象。

注意：

  • 方法允许一个异步函数阻止那些干涉其内部请求的进度（progress）或状态（status）的其它代码。

  • Promise 对象只包含 deferred 对象的一组方法，包括：done(),then(),fail(),isResolved(), isRejected(), always(), 这些方法只能观察一个 deferred 的状态；不包括任何用于改变状态的延迟方法(resolve, reject, notify, resolveWith, rejectWith, 和 notifyWith)，因此Promise 对象无法更改 deferred 对象的内在状态

  • deferred.promise()也可以接受一个 target 参数，此时传入的 target 将被赋予 Promise 的方法，并作为结果返回，而不是创建一个新对象（这个方法可以用于在已经存在的对象上绑定 Promise 行为的情况）。

语法

  • deferred.promise( [target ] )

jQuery 1.5 新增该函数

参数说明

参数说明
targetObject类型绑定 promise 方法的对象。

返回值

deferred.promise() 返回的是一个 Promise 对象

示例&说明

创建一个延迟对象，并设定两个延时时间是随机的定时器，分别用于受理（resolve）和拒绝（reject）延迟对象。无论哪一个先执行，都会调用其中一个回调函数。而另一个定时器则不会产生任何效果，因为在最先调用的那个定时器处理中，延迟对象已经处于完成状态(resolved 或 rejected 状态)。同时，还会设定一个定时器进度（progress）通知函数，用于进度通知处理，并在文档的 “body” 中显示 “working…”，以下为一次测试时的jQuery示例代码：

function asyncEvent(){
        var dfd = new jQuery.Deferred();

        var resolveValue=400+Math.random()*2000;
        var resolveTime=Math.floor(resolveValue)
        console.log("resolveTime"+resolveTime)//resolveTime：1890ms

        // 在一个随机的时间间隔之后 Resolve （解决状态）
        setTimeout(function(){
            dfd.resolve("欢呼");

        }, Math.floor(resolveTime));

        var rejectValue=400+Math.random()*2000;
        var rejectTime=Math.floor(rejectValue)
        console.log("rejectTime"+rejectTime)//rejectTime：1364ms

        // 在一个随机的时间间隔之后 reject （拒绝状态）
        setTimeout(function(){
            dfd.reject("对不起");
        },rejectTime);

        // 每半秒显示一个"working..."消息
        setTimeout(function working(){
            //"pending" : Deferred 对象是尚未完成状态
            //0ms 执行一次  500ms执行一次 1000ms执行一次
            //1364ms 执行  dfd.reject("对不起") 
            //传递拒绝值"对不起" 给拒绝过滤函数 alert( status+', 这次你失败了' );
            if ( dfd.state() === "pending" ) {
                //向正在执行的Deferred 对象的回调函数列表传递参数
                dfd.notify("working... ");

                setTimeout(working, 500);
            }
        }, 1);

        // 返回 Promise 对象，调用者不能改变延迟对象
        return dfd.promise();
    }
    // 为异步函数附加一个done, fail, 和 progress 处理程序
//如果向 jQuery.when 传入一个延迟对象，那么会返回它的 Promise 对象(延迟方法的一个子集)
    $.when( asyncEvent() ).then(
        function(status){
            alert( status+', 事情进展顺利' );
        },
        function(status){
            alert( status+', 这次你失败了' );
        },
        function(status){
            $("body").append(status);
        }
    );

使用目标参数,产生现有对象的Promise对象：

// 现有对象
    var obj = {
        hello: function( name ) {
            alert( "Hello " + name );
        }
    },
    // 创建一个延迟 Deferred
    defer = $.Deferred();
    // 设置对象作为 promise
    defer.promise( obj );
    // Resolve （解决） 该对象
    defer.resolve( "John" );
    // 使用该对象作为 Promise，向受理列表中添加回调函数
    //延迟对象状态为解决，因此done 被调用
    obj.done(function( name ) {
        obj.hello( name ); //将弹出 "Hello John"
    }).hello( "Karl" ); // 将弹出 "Hello Karl";

.promise()

.promise() 函数返回一个 Promise 对象，观察某种类型被绑定到集合的所有行动，是否已被加入到队列中。

返回的 Promise 被链接到延迟对象上，保存在元素的 .data() 中。由于 .remove() 方法会移除元素上的 data，同时也会移除元素本身。所以，使用它会防止任何元素上未被受理的（unresolved） Promise 被受理（resolving）。如果有必要在元素的 Promise 被受理（resolved）之前，从 DOM 中移除该元素的话，请使用.detach() 来代替。之后再调用 .removeData()

注意：

  • .promise() 方法返回一个动态生成的 Promise，当绑定到集合中的所有特定动作（action）已经被加入或未被加入到队列中时，生成的 Promise 将被受理（resolve）。

语法

  • .promise( [type ] [, target ] )

jQuery 1.5新增

参数说明

参数说明
type可选/String类型需要待观察队列类型。
target可选/PlainObject类型将要绑定 promise 方法的对象。

默认情况下， type的值是”fx” ，这意味着返回被受理（resolve）的 Promise 对象的时机，是在所有被选中元素的动画都完成时发生的。

如果提供target参数，.promise()在该参数上添加方法，然后返回这个对象，而不是创建一个新的。它适用于在一个已经存在的对象上添加 Promise 行为的情况。

返回值

.promise()方法返回一个动态生成的 Promise对象。

示例&说明

1.在一个没有激活动画的集合上调用 .promise()
相关的jQuery示例代码：

//在一个没有激活动画的集合上调用 .promise()，返回一个被受理（resolved）的 Promise
var div = $( "" );
    div.promise().done(function( arg1 ) {
        //弹出 "true"
        alert( this === div && arg1 === div );
    });

2.当所有的动画结果时(包括那些在动画回调函数和之后添加的回调函数中初始化的动画），受理（Resolve）返回的 Promise，相关HTML代码 :


//没有样式不易观察执行效果，因此添加样式设置
    div{
        height:100px;
        width:200px;
        border:2px solid #334455;
        margin-top:2px;
    }



准备...

当所有的动画结果时(包括那些在动画回调函数和之后添加的回调函数中初始化的动画），受理（Resolve）返回的 Promise，相关jQuery代码：

$( "button" ).on( "click", function() {
        $( "p" ).append( "已开始..." );

        $( "div" ).each(function( i ) {
            $( this ).fadeIn().fadeOut( 100 * ( i + 51 ) );
        });

        $( "div" ).promise().done(function() {
            $( "p" ).append( " 完成! " );
        });
    });
    //效果显示好像是等动画执行完成后才执行done()方法

使用 $.when() 语句(.promise() 方法使得在 jQuery 集合中实现它变成了可能)，受理（Resolve）返回的 Promise

var effect = function() {
        return $("div").fadeIn(800).delay(1200).append(" fadeOut! ").fadeOut();
    };
    $("button").bind( "click", function() {
        $("p").append( " 已开始... ");
        $.when( effect() ).done(function() {
            $("p").append(" 完成! ");
        });
        //效果显示好像是等动画执行完成后才执行done()方法
    });

到此，关于“jquery延迟对象怎么使用”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！


当前名称：jquery延迟对象怎么使用
网页URL：http://cdweb.net/article/gdccgp.html

其他资讯