• 技术文章 >web前端 >前端问答

    jquery延迟对象是什么

    青灯夜游青灯夜游2022-11-02 18:04:29原创118

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

    大前端成长进阶课程:进入学习

    本教程操作环境:windows7系统、jquery3.6.1版本、Dell G3电脑。

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

    语法

    jQuery1.5新增该函数

    参数说明

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

    返回值

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


    deferred.always()

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

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

    语法

    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。

    语法

    jQuery1.5新增该函数

    参数说明

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

    返回值

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

    示例&说明

    HTML示例代码:

     <button>Go</button>
     <p>Ready...</p>

    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()。

    语法

    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()调用

    语法

    jQuery 1.7 新增该函数

    参数说明

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

    返回值

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


    deferred.isRejected()

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

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

    注意:

    语法

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

    返回值

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


    deferred.isResolved()

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

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

    注意:

    语法

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

    返回值

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


    deferred.notify()

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

    注意:

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

    语法

    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 )。

    注意:

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

    语法

    jQuery 1.7 新增该函数

    参数说明

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

    返回值

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


    deferred.reject()

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

    注意:

    语法

    jQuery1.5新增该函数

    参数说明

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

    返回值

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


    deferred.rejectWith()

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

    注意:

    语法

    jQuery1.5新增该函数

    参数说明

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

    返回值

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


    deferred.resolve()

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

    注意:

    语法

    jQuery1.5新增该函数

    参数说明

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

    返回值

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


    deferred.resolveWith()

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

    注意:

    语法

    jQuery1.5新增该函数

    参数说明

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

    返回值

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


    deferred.state()

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

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

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

    语法

    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)时,会使用相同的值作为原始值。

    语法

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

    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(延迟)对象被解决/拒绝或仍在进行中时,调用添加处理程序。

    注意:

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

    语法

    参数说明

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

    返回值

    deferred.then() 返回 Promise 对象

    示例&说明

    HTML代码:

    <button>过滤解决值</button>
    <p></p>

    过滤解决值:

    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 )的一个别名

    语法

    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 对象。

    注意:

    语法

    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()

    注意:

    语法

    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 />" );
        div.promise().done(function( arg1 ) {
            //弹出 "true"
            alert( this === div && arg1 === div );
        });

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

    <style type="text/css">
    //没有样式不易观察执行效果,因此添加样式设置
        div{
            height:100px;
            width:200px;
            border:2px solid #334455;
            margin-top:2px;
        }
    </style>
    <button>Go</button>
    <p>准备...</p>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

    当所有的动画结果时(包括那些在动画回调函数和之后添加的回调函数中初始化的动画),受理(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视频教程web前端视频

    以上就是jquery延迟对象是什么的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    快捷开发Web应用及小程序:点击使用

    支持亿级表,高并发,自动生成可视化后台。

    专题推荐:jquery 延迟对象
    上一篇:es6中有没有&符号 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• jquery是基于什么实现的• 什么是jquery plugins• jquery怎么隐藏option• jquery怎么给元素增加宽度• jquery怎么删除name属性值
    1/1

    PHP中文网