jQuery中的$.Deferred、$.when异步操作

前言

　　网页中常常会出现一些耗时比较长的操作，如ajax请求服务器数据，这些操作都不能立即得到结果。如果我们需要在这些操作执行完后来进行另外的操作，我们就需要将这些操作放在回调函数中，$.Deferred就是jQuery用来处理回调操作的。jQuery中的$.Deferred对$.Callbacks很有依赖，看看$.Callbacks执行回调。

    var callbacks = $.Callbacks();
    setTimeout(function(){
        console.log(1); // 1
        callbacks.fire(); // 2 add中的方法也会执行(同步的写法，异步执行)
    }, 1000);
    callbacks.add(function(){
        console.log(2);
    });

　　$.Deferred来实现上面的操作

    var deferred = $.Deferred();
    setTimeout(function(){
        console.log(1); // 1
        deferred.resolve();// 2
    }, 1000);
    deferred.done(function(){
        console.log(2);
    });

 

$.Deferred的三队抽象

1、resolve-》done-》$.Callbacks('once memory')-》成功-》只触发一次

2、reject-》fail-》$.Callbacks('once memory')-》失败-》只触发一次

3、notify-》progress-》$.Callbacks('memory')-》通知-》不断触发直到resolve或reject

    var deferred = $.Deferred();
    setTimeout(function(){
        //deferred.resolve(); // success
        deferred.reject(); // error
        //deferred.notify(); // progressing
    }, 1000);
    deferred.done(function(){
        console.log('success');
    }).fail(function(){
        console.log('error');
    }).progress(function(){
        console.log('progressing');
    });

下面是一个比较有意思的用法：memory的记忆功能。

    var deferred = $.Deferred();
    setTimeout(function(){
        deferred.resolve();// 1
    }, 100);
    deferred.done(function(){
       console.log(1);
    });
    $('#btn').on('click', function () {
        deferred.done(function(){
            console.log(2); // 2...只要单击一次按钮就会触发一次
        });
    });

 

deferred和promise

　　$.Deferred会有两个延迟对象，分别是deferred和promise。deferred包含有所有的方法，而promise不包含改变延迟对象状态的三个方法resolve、reject、notify。这样做的好处就是在某些时候对外不提供改变对象状态的方法，以免延迟对象的状态混乱。

    function fn(){
        var deferred = $.Deferred();
        setTimeout(function(){
            deferred.resolve();// 不会触发，状态在外部被修改了。
        });
        return deferred;
    }
    var newDeferred = fn();
    newDeferred.done(function(){
        console.log('success');
    }).fail(function(){
        console.log('error');
    });
    newDeferred.reject(); // error

    function fn(){
        var deferred = $.Deferred();
        setTimeout(function(){
            deferred.resolve();// success
        });
        return deferred.promise();
    }
    var newDeferred = fn();
    newDeferred.done(function(){
        console.log('success');
    }).fail(function(){
        console.log('error');
    });
    newDeferred.reject(); // 报错 reject方法不存在

 

其他方法介绍

1、state：返回延迟对象的状态

　　pending：创建对象时的状态

　　resolved：回调成功-会禁用失败和notify的回调

　　rejected：回调失败-会禁用成功和notify的回调

2、always：不管成功或失败都会触发

3、then：传递三个方法分别处理三个操作

4、pipe：延迟对象过滤器？

resolve、done、reject、fail、notify、progress

$.when

1、$.when(deferred)：一个延迟对象。

2、$.when(deferred, deferred,...)：多有的延迟对象都调用了resolve()时才执行done；只要有一个延迟对象调用了reject()就会执行fail()。

    function fn1(){
        var deferred = $.Deferred();
        setTimeout(function(){
            deferred.resolve();
        }, 1000);
        return deferred.promise();
    }
    function fn2(){
        var deferred = $.Deferred();
        setTimeout(function(){
            deferred.resolve();
        }, 1000);
        return deferred.promise();
    }
    $.when(fn1(), fn2()).done(function(){
        console.log('success'); // 都resolve() success
    }).fail(function(){
        console.log('error'); // 有一个reject() error
    });

　3、如果参数不是延迟对象就会跳过该参数并代表成功，如果参数都不是延迟对象，也会成功，会执行done。

    function fn1(){
        var deferred = $.Deferred();
        setTimeout(function(){
            deferred.resolve();
        }, 1000);
        return deferred.promise();
    }
    $.when(fn1(), 123).done(function(){
        console.log('success'); // fn1()->resolve() success
    }).fail(function(){
        console.log('error'); // fn1()->reject() error
    });

NOTE：成功或失败的回调函数的参数对应when中的参数，如果参数是延迟对象回调函数得到undefined，不是延迟对象得到参数值。

    function fn1(){
        var deferred = $.Deferred();
        setTimeout(function(){
            deferred.resolve();
        }, 1000);
        return deferred.promise();
    }
    $.when(fn1(), 123).done(function(arg1, arg2){
        console.log(arg1);// undefined
        console.log(arg2);//123
        console.log('success'); // fn1()->resolve() success
    }).fail(function(){
        console.log('error'); // fn1()->reject() error
    });