高速消除异步回调的标题,deferred学习笔记

By admin in web前端 on 2019年8月27日

jquery Deferred 快速解决异步回调的问题,jquerydeferred

jquery Deferred
快速解决异步回调的问题

function ok(name){

  var dfd = new $.Deferred();
  callback:func(){

     return dfd.resolve( response );
  }

  return dfd.promise();
}

$.when(ok(1),ok(2)).then(function(resp1,resp2){})

//相关API 分成3类

1类:$.when(pro1,pro1) 将多个 promise 对象以and的关系 合并为1个

2类:promise 激发为 解决 deferred.resolve([ args ] )
deferred.resolveWith( context, [ args ] )

和 拒绝 .reject  .rejectWith

context 上下文 替换 this 和通知 .notify  .notifyWith

3类: 对激发的响应  解决时deferred.done(args) 拒绝时 deferred.fail()
通知时 deferred.progress()

不管 解决 或 拒绝 deferred.always()

deferred.then( doneCallbacks, failCallbacks [, progressCallbacks] )

promise(或者叫deferred 延迟对象如何获取?)

var dfd = new $.Deferred(); return dfd.promise();

返回promise当前状态

deferred.state()  pending(尚未完成) resolved rejected

管道

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


var defer = $.Deferred()

var filtered = defer.pipe( null, function( value ) {

   return value * 3;
});

defer.reject( 6 );
filtered.fail(function( value ) {
   alert( "Value is ( 3*6 = ) 18: " + value );
});

以上这篇jquery Deferred
快速解决异步回调的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持帮客之家。

Deferred
快速解决异步回调的问题,jquerydeferred jquery Deferred
快速解决异步回调的问题 function ok(name){ var dfd = new $.Deferred();
callback:func(){…

返回promise当前状态

             .always(function(){alert(“finished”);});

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


var defer = $.Deferred()

var filtered = defer.pipe( null, function( value ) {

   return value * 3;
});

defer.reject( 6 );
filtered.fail(function( value ) {
   alert( "Value is ( 3*6 = ) 18: " + value );
});

<button>button</button>

context 上下文 替换 this 和通知 .notify  .notifyWith

 

//相关API 分成3类

效果同pipe

var dfd = new $.Deferred(); return dfd.promise();

 

jquery Deferred
快速解决异步回调的问题

                },

以上这篇jquery Deferred
快速解决异步回调的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

 

function ok(name){

  var dfd = new $.Deferred();
  callback:func(){

     return dfd.resolve( response );
  }

  return dfd.promise();
}

$.when(ok(1),ok(2)).then(function(resp1,resp2){})

    

和 拒绝 .reject  .rejectWith

  

3类: 对激发的响应  解决时deferred.done(args) 拒绝时 deferred.fail()
通知时 deferred.progress()

    console.log(“finished”);

1类:$.when(pro1,pro1) 将多个 promise 对象以and的关系 合并为1个

the third callback

您可能感兴趣的文章:

  • jQuery回调函数的定义及用法实例
  • 使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
  • 从零学jquery之如何使用回调函数
  • jQuery
    AJAX回调函数this指向问题
  • jQuery Ajax Post
    回调函数不执行问题的解决方法
  • jQuery的load()方法及其回调函数用法实例
  • 浅谈jquery回调函数callback的使用
  • jquery序列化表单以及回调函数的使用示例
  • jQuery插件扩展实例【添加回调函数】
  • jQuery回调方法使用示例

// Call all the callbacks with the given arguments

2类:promise 激发为 解决 deferred.resolve([ args ] )
deferred.resolveWith( context, [ args ] )

 

promise(或者叫deferred 延迟对象如何获取?)

 

deferred.state()  pending(尚未完成) resolved rejected

  $.Deferred在jQuery代码自身四处被使用(promise、DOM
ready、Ajax、Animation)

deferred.then( doneCallbacks, failCallbacks [, progressCallbacks] )

 

管道

 

不管 解决 或 拒绝 deferred.always()

  }

done/resolve

}); 

 

 

    console.log(‘progress’);

var dfd = $.Deferred();

结果:

    height: 50px;

<div></div>

        // All done!

                always: function() {

var dfd = $.Deferred();

复制代码

 then和pipe

        };

 

 

dfd.done([f1,f2,f3],[f2,f3])

复制代码

    argFilter = dfd.pipe(null, function(arg){return
“(*^__^*)”+arg;});

done

            ],

$(“button”).on(“click”,function(){

 

            },

}

eg4:

复制代码

eg1:

 

复制代码

            // Add a callback or a collection of callbacks to the list

 

        console.log(“the third callback”);

the third callback

 

              

  1.
如果执行状态是resovled,Deffered对象会立刻调用done()方法指定的回调函数

eg2:

复制代码

var dfd = $.Deferred();

}

复制代码

 

 

执行多个回调函数

            },

 

 

the first callback

复制代码

 

    float: left;

 

            // Remove a callback from the list

                },

 

复制代码

 

 

 

$.ajax({

});

eg3:

 

    console.log(‘done’);

复制代码

});

}

            func.call( deferred, deferred );

function f2(){

 

progress/notify

function f2() {

 

 

     console.log( this === button && arg === button );  //true

结果:

    float: left;

finished

        // Call given func if any

                then: function( /* fnDone, fnFail, fnProgress */ ) {

    Deferred: function( func ) {

 

var deferred = $.Deferred();

 

done

}

 

 

deferred.then(f1, f2, f3);

 

 when为多个操作指定回调函数

 

});

 

使用pipe可以过滤参数,但是jQuery 1.8后已经启用pipe方法,建议使用then

 

the third callback

$(“button”).on(“click”,function(){

var effect = function() {

 

 

dfd.fail(function(){

            deferred = {};

 

$.when()——为多个操作指定回调函数

 

复制代码

 

 

the fourth callback

function f3() {

    dfd.resolve(“###############”);

复制代码

 

(*^__^*)###############

 

 

复制代码

deferred对象的done方法定义如下:deferred.done( doneCallbacks [,
doneCallbacks ] ) 可以传入 array of functions

 

 

    deferred.reject();

 

    setInterval(function(){

deferred.resolveWith()—— 

    console.log(‘fail’);

<div></div>

 

    dfd.resolve(“###############”);

<div></div>

});

 

  });

                      .done(function(){console.log(“the second
callback”);})

 

复制代码

输出结果如下:

 

    background-color: #090;

    }

GET  200 OK 83ms    

 

 

GET  200 OK 83ms    

});

复制代码

dfd.pipe(function(arg){return “(*^__^*)”+arg;});

复制代码

 

            // To know if the callbacks have already been called at
least once

var dfd = $.Deferred();

$(“button”).on(“click”,function(){

effect()方法执行完后输出 finished;

function f2() {

 

            fired: function() {

 invoke callback queues

    dfd.reject(“###############”);

 

复制代码

 

   .always(function(arg){console.log(arg+”end”);});

            add: function() {

 

 

 

$.ajax(“test.jsp”).success(function(){console.log(“the first
callback”);})

复制代码

 

deferred.isRejected()——判断状态是否为rejected

 

 

$(“button”).on(“click”,function(){

复制代码

 

 

复制代码

                promise: function( obj ) {

dfd.progress(function(){

复制代码

 

  $.when( effect() ).done(function() {

    console.log(“the second callback”);

复制代码

 

eg1:一次性定义done fail 和progress

var dfd = $.Deferred();

eg2:使用notify间隔的执行回调函数

                …

 

复制代码

           .success(function(){console.log(“the second
callback”);})

 

var dfd = $.Deferred();

输出结果同上

finished

 

###############the third callback

        success:function(result){alert(“success! data is :”+result);},

点击button,输出:

$(“button”).on(“click”,function(){

<div></div>

    dfd.resolve();

 

        dfd.notify();

});

        jQuery.each( tuples, function( i, tuple ) {

function f1(){

GET   200 OK 460ms    

    deferred.reject();

 

    console.log(arg+”the third callback”);

the second callback

 

 

如果传入多个deferred,返回a new master
deferred对象,该对象集合所有deferred对象的状态,如果所有deferred对象是resollve则结果是resolve,如果有一个是reject则结果是reject

}

复制代码

 

argFilter.fail(function(arg){

eg2: 

eg1:

结果同上

done/resolve   fail/reject   progress/notify

$.Deferred在jQuery代码自身四处被使用(…

jQuery.extend({

 

复制代码

    dfd.notify();

 

 

    console.log(“the first callback”);

 

 

eg2:

 

  }

复制代码

 

                // Get a promise for this deferred

 

 

###############the first callback

the second callback

 

};

复制代码

 

});  

执行状态

复制代码

});

    dfd.reject();

 

###############the second callback

    

    console.log(“###############”)

dfd.done(function(){

        promise.promise( deferred );

$.when($.ajax(“test.jsp”),$.ajax(“demo.jsp”)).done(function(){console.log(“done”);});

 

    console.log(‘fail’);

 

var deferred = $.Deferred();

 

eg3:

  });

                      .done(function(){console.log(“the third
callback”);})

###############end

deffered.state()——判断当前状态

 

deferred.done()——当Deferred对象状态为resolved时执行回调函数

 

复制代码

使用Deferred:

 

eg4. 给resolve添加args

        console.log(“the first callback”);

 

    dfd.resolve();

eg2:

 

点击按钮,每1s输出一次##################

 <style>

 

 

    // Deferred helper

                [ “reject”, “fail”, jQuery.Callbacks(“once memory”),
“rejected” ],

###############the third callback

}

复制代码

    $.ajax(“test.jsp”).done(function(){console.log(“the first
callback”);})

 

 

the first callback

     $.ajax(“test.jsp”).done([f1,f2,f3],[f2,f3])

  </style>

 

 

 

 

deferred.rejectWith()——与上面reject的区别:with the given context and
args. 下面类似

   

 

 

 

 

 

    },1000);

var dfd = $.Deferred();

输出:

 

}); 

deferred.promise()——返回Deferred的promise对象

.promise([type][,target])  return a promise object  
当所有与其相关的action结束后变为resolve状态

 register multiple callbacks into callback queues

    }

            },

           (即不管成功或者失败,对应ajax中complete)(关于执行状态看下一章节)

});

 

    }

$.when($.ajax(“test.jsp”)).then(f1,f2,f3);

点击按钮输出:

 

            }

 

复制代码

  3.
 如果执行状态是未完成,Deffered对象会继续等待或者是调用progress()方法指定的回调函数

       ….

    return deferred.promise();

 

复制代码

        return deferred;

$(“button”).on(“click”,function(){

 

 

复制代码

 

或者:

<div></div>

 

            },

 

    console.log(‘done’);

 

 

eg1:

jQuery.Callbacks = function( options ) {// Actual Callbacks object

}

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

 

 

$(“button”).on(“click”,function(){

        console.log(“the second callback”);

                [ “notify”, “progress”, jQuery.Callbacks(“memory”) ]

   .done(function(){console.log(“finished”);});

  $( “div” ).each(function( i ) {

点击按钮,输出  ###############

 

deferred.isResolved()——判断状态是否为resolved

 

dfd.done([f1,f2,f3],[f2,f3])

the second callback

deferred.notify()——call the progressCallbacks  

    console.log(‘done’);

    function f2(){

function f3() {

 

###############the second callback

  Deffered对象包含如下方法:

 

$(“button”).on(“click”,function(){

 

 

 

           .complete(function(){alert(“complete!”)});

the first callback

deferred.resolve()——即将状态转为resolve  

 

deferred.reject()——reject a deferred对象,即将状态转为rejected( with
the given args.)

 relay the success or failure state of any synchronous or asynchronous
function

    console.log(“finished”);

 

  特性:使用Deferred对象可以添加多个回调函数;
延迟特性,处理耗时操作问题

$(“button”).on(“click”,function(){

 注意:$.ajax()中jqXHR.success(), jqXHR.error(), jqXHR.complete(),
在jquery 1.8中已经弃用,应该使用done(),fail()和always()

            remove: function() {

 

<div></div>

div {

复制代码

 

jQuery.when(deferreds);

}); 

 

eg:

 

function f3(arg){

   .done(function(){console.log(“finished”);})

    console.log(arg+”the first callback”);

  Deffered对象三种执行状态:
resolved(已完成)、未完成、rejected(失败)

  

    function f1(){

            fire: function() {

deferred.notifyWith()——  

function f2(arg){

dfd.progress(function(){

 .promise()

 

    console.log(“the third callback”);

点击按钮,输出  ###############

如果传入单个deferred, 返回promise对象,后面可以链式添加then等方法

 

 

  $( “div” ).promise().done(function() {

 

 

 

});

复制代码

复制代码

 

 

 

                self.fireWith( this, arguments );

 

复制代码

 

 

    return self;

                },

    $( this ).fadeIn().fadeOut( 1000 * ( i + 1 ) );

点击按钮,输出  ###############

 

 

 

  });

 

        });

复制代码

 

        url:”test.jsp”,

    console.log(arg)

    console.log(‘fail’);

 

  }

 pipe

function f1() {

        var tuples = [

复制代码

function f2() {

            …

复制代码

或者:

        if ( func ) {

});

jQuery1.9.1源码如下:

                // If obj is provided, the promise aspect is added to
the object

pipe方法定义为:deferred.pipe( [doneFilter ] [, failFilter ] [,
progressFilter ] )    returns a new promise

                  .error(function(){alert(“Error”)})

fail/reject

                      .fail(function(){alert(“Error”)});

 

 

                return !!fired;

 

 

the third callback

div {

  在jQuery1.5.0版本引入,为了实现Deferred对象,jQuery改写了ajax。是由jQuery.Deferred()方法创建的链式对象。

 

            deferred[ tuple[0] + “With” ] = list.fireWith;

                return this;

<div></div>

                state: function() {

    width: 50px;

点击按钮,输出 fail, 可以根据需要修改deferred.reject
为resolve或者是notify

 

               ….

 

   jQuery下两个方法:

the second callback

一般done/resolve fail/reject progress/notify 对应使用

deferred.fail()——当Deferred对象状态为rejected时执行回调函数

 

 

}

                   …..

ajax及简单链式操作

 

复制代码

复制代码

deferred.pipe(f1, f2, f3);

$(“button”).on(“click”,function(){

 

    margin-right: 10px;

    background-color: #090;

    console.log(“###############”)

the second callback

$.Deffered() ——创建Deffered对象,var deferred = $.Deffered();

        // Make the deferred a promise

Callbacks 是jQuery的回调对象,用于添加回调、删除回调、执行回调等

        // Keep pipe for back-compat

 

    console.log(‘progress’);

};

});

    console.log(“###############”)

 

 

输出如下:

 

 

var button = $( “<button>” );     

    },

 

 

 

$.ajax(“test.jsp”).success(function(result){alert(“success! data is
:”+result);})   

 

 

});

 

            promise = {

    display: none;

$.when($.ajax(“test.jsp”)).done(function(){console.log(“done”);});

                      .fail(function(){alert(“Error”)})

 

           ….

 

 

});

    ….

            state = “pending”,

                   ….

 

                  …..

 

 

 

        }

 

    when: function( subordinate /* , …, subordinateN */ ) {

 

 

复制代码

                }

}

    console.log(arg)

 

 

 

 

eg1:

复制代码

function f1(arg){

function f1() {

(The .promise() method returns a dynamically generated Promise that is
resolved once all actions of a certain type bound to the collection,
queued or not, have ended.)

    display: none;

        promise.pipe = promise.then;

 

复制代码

 

 

the third callback

                      .fail(function(){console.log(“Error”)});

});

 

 

    $.ajax(“test.jsp”).done(function(result){alert(“success! data is
:”+result);})

}

    height: 50px;

复制代码

$( “button” ).on( “click”, function() {

  </style>

deferred.always()——执行回调函数,不管deffered 对象是
状态resolved或者是rejected

 

    width: 50px;

button.promise().done(function( arg ) {

success也可达到相同效果,但是已弃用不建议使用

 

 

 

 

var dfd = $.Deferred();

 

 

<div></div>

  return $( “div” ).fadeIn( 800 ).delay( 1200 ).fadeOut();

           .error(function(){console.log(“Error”)});

 

    console.log(“###############”);

 

function f1() {

                      .done(function(){console.log(“the fourth
callback”);})

简单使用done方法和resolve方法

 

           .success(function(){console.log(“the third
callback”);})

 

deferred.pipe()——过滤参数

}

function f3() {

    console.log(arg+”the second callback”);

}

 

复制代码

eg3: 使用jQuery.Deferred()创建Deferred对象

  

由于$.ajax
方法和$.get方法返回的是jqXHR对象(源自Deferred对象)因而上面的操作可以以下面的方式实现。

                [ “resolve”, “done”, jQuery.Callbacks(“once memory”),
“resolved” ],

 

 

dfd.done(function(arg){

<button>button</button>

deferred.then()——执行回调函数,deferred 对象是
状态resolved或者是rejected 或者是 in progress

     error: function(){alert(“Error!”);},

复制代码

 

 

methods

主要源码

        // Add list-specific methods

 

 

}

function f3(){

 

});

复制代码

});

    margin-right: 10px;

        self = {

  2.
如果执行状态是rejected,Deffered对象会立刻调用fail()方法指定的回调函数

复制代码

 <style>

    function f3(){

       complete:function(){alert(“complete!”)},

 

ajax方式:

});

    console.log(‘progress’);

 

 then 

$( “button” ).on( “click”, function() {

                // action, add listener, listener list, final state

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 澳门新葡亰官网app 版权所有