• JQuery的异步回调支持


    1、Deferred对象:

    一般在函数内部进行声明,并在运行过程中改变其状态,例如成功或失败,最终返回Promise对象用于状态监听。

    主要方法:

    Deferred.resolve(param...) :执行成功,将会触发Promise对象的done回调方法。
    Deferred.reject(param...) :执行失败,将会触发Promise对象的fail回调方法。
    Deferred.notify(param...) :正在执行,将会触发Promise对象的progress回调方法。
    Deferred.promise() :返回Promise对象实例。

    其他说明:

    使用 $.Deferred() 即可声明一个Deferred对象。

    2、Promise对象:

    可以将其看作Deferred的一个实例,在函数状态改变时将会触发Promise对象的相应回调方法。

    主要方法:

    Promise.done(callback) :执行成功时的回调方法。
    Promise.fail(callback) :执行失败时的回调方法。
    Promise.progress(callback) :正在执行时的回调方法。
    Promise.always(callback) :只要Deferred的状态发生改变就会触发always方法,类似于finally。
    Promise.then(doneCallback, failCallback, progressCallback) :另外一种定义回调函数的方式。

    其他说明:

    Promise的所有方法均返回Promise对象,因此可以链式调用,比如:Promise.done(funA).fail(funB).always(funC)
    JQuery的Ajax方法默认返回Promise对象,因此可以直接使用Promise的各种回调方法。

    3、代码示例:

     1 //-- 全局变量 ---------------------------
     2 var flagA = flagB = flagC = "";
     3 
     4 //-- Fun : waitA ---------------------------
     5 var waitA = function(ms){
     6     if(!ms) ms = 2000;
     7     var def = $.Deferred();
     8     setTimeout( function(){ flagA = "waitA执行成功"; def.resolve(flagA); }, ms);
     9     return def.promise();
    10 };
    11 //-- Fun : waitB ---------------------------
    12 var waitB = function(ms){
    13     if(!ms) ms = 2000;
    14     var def = $.Deferred();
    15     setTimeout( function(){ flagB = "waitB执行失败"; def.reject(flagB); }, ms);
    16     return def.promise();
    17 };
    18 //-- Fun : waitC ---------------------------
    19 var waitC = function(ms){
    20     if(!ms) ms = 2000;
    21     var def = $.Deferred();
    22     setTimeout( function(){ flagC = "waitC执行失败"; def.reject(flagC); }, ms);
    23     return def.promise();
    24 };
    25 
    26 //-- 调用方式一:
    27 waitA(2000).done(function(msg){
    28     console.info(msg);
    29 }).fail(function(msg){
    30     console.info(msg);
    31 }).always(function(msg){
    32     console.info(msg);
    33 });
    34 
    35 //-- 调用方式二:
    36 waitA(2000).then(function(msg){
    37     console.info(msg);
    38 }, function(msg){
    39     console.info(msg);
    40 });
    41 
    42 //--调用方式三:
    43 $.when(waitA(2000)).then(function(msg){
    44     console.info(msg);
    45 }, function(msg){
    46     console.info(msg);
    47 });
    48 
    49 //--调用方式四:按顺序执行三个函数
    50 $.when(waitA(2000)).then(waitB).then(waitC);
    51 //或者:
    52 $.when(waitA(2000)).then(function(msg){
    53     console.info(msg);
    54     waitB(2000).then(function(msg){
    55         console.info(msg);
    56         waitC(2000).then(function(msg){
    57             console.info(msg);
    58         });
    59     });
    60 });
    61 
    62 //--调用方式五:同时执行三个函数
    63 $.when(waitA(1000), waitB(2000), waitC(3000)).then(function(mes){
    64     console.info("全部执行成功!" + mes);
    65 }, function(mes){
    66     console.warn("未全部执行成功,其中:" + mes);
    67 });
  • 相关阅读:
    codeforces 724G
    P4151 [WC2011]最大XOR和路径 线性基
    2018-2019 ACM-ICPC, Asia Seoul Regional Contest K TV Show Game 2-sat
    codeforces 1198E Rectangle Painting 2 最小点覆盖
    codeforces847J Students Initiation 网络流
    codeforces863F Almost Permutation 费用流
    codeforces1213F Unstable String Sort 思维
    codeforces1156D 0-1-Tree 并查集
    codeforces1156D 0-1-Tree 换根dp
    错误集合
  • 原文地址:https://www.cnblogs.com/netWild/p/5558716.html
Copyright © 2020-2023  润新知