jQuery源码分析(九) 异步队列模块 Deferred 详解

2021-02-08 作者：匿名阅读：1312次

前言

本文重点解决jQuey源码分析(九)异步队列模块Defeed详解问题,希望能够帮助到你

deferred对象就是jQuery的回调函数解决方案，它解决了如何处理耗时操作的问题,比如一些Ajax操作，动画操作等。(P.s:紧跟上一节:https://www.cnblogs.com/greatdesert/p/11433365.html的内容)

异步队列有三种状态:待定(pending)、成功(resolved)和失败(rejected),初始时处于pending状态

我们可以使用jQuery.Deferred创建一个异步队列，返回一个对象，该对象含有如下操作:

done(fn/arr) 　　　　　　　　;添加成功回调函数，当异步队列处于成功状态时被调用,参数同:jQuery.Callbacks(flags).add(fn/arr)
fail(fn/arr) 　　　　　　　 ;添加失败回调函数，参数同上
progress(fn/arr) 　　　　 ;添加消息回调函数，参数同上
then(donefn/arr,failfn/arr,profn/arr) ;同时添加成功回调函数、失败回调函数和消息回调函数
always(fn/arr) 　　　　　　 ;添加回调函数到doneList和failList中，即保存两份引用，当异步队列处于成功或失败状态时被调用 ;参数可以是函数、函数列表
state() 　　　　　　 ;返回异步队列的当前状态、返回pending、resolved或者rejected
promise(obj) 　　　　　 ;如果设置了obj参数对象则为obj对象增加异步队列的方法并返回。如果未设置参数obj，则返回当前Deferred对象的只读副本

如果调用$.Diferred()创建一个异步队列，返回后的对象可以调用如下几个方法:

writer by:大沙漠 QQ:22969969

resolve(args) 　　　　　　 ;使用指定的参数调用所有的成功回调函数，异步队列进入成功状态，之后就无法再调用
reject(args) 　　　　　 ;使用指定的参数调用所有的失败回调函数，异步队列进入失败状态
notify(args) 　　　　 ;使用指定的参数调用所有的消息回调函数
resolveWith(context,args) 　 ;使用指定的上下文和参数调用所有的成功回调函数，异步队列进入成功状态
rejectWith(context,args) 　　 ;使用指定的上下文和参数调用所有的失败回调函数，异步队列进入失败状态
notifyWith(context,args) 　　 ;使用指定的上下文和参数调用所有的消息回调函数

是不是和上一节介绍的Callbacks的fire和fireWith很像，Defferred内部就是通过通过Callback()回调函数列表来实现的，例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/1.7.1/jquery.js"></script>
</head>
<body>
<script>
    function f1(x){console.log('f1 '+x);}
    function f2(x){console.log('f2 '+x);}
    function f3(x){console.log('f3 '+x);}

    var t = $.Deferred();                   //创建异步队列
    t.done(f1).fail(f2).progress(f3);       //添加成功回调函数、失败回调函数和消息列表回调函数。等同于t.then(f1,f2,f3); 
    t.notify('test');                       //触发所有消息函数列表，输出:f3 test
    t.resolve('done');                      //触发所有成功回调函数,输出:done
    t.reject('fail');                       //没有输出，触发成功回调函数后失败回调函数列表就会被禁用，反过来也如此
    t.progress(f1);                         //输出:f1 test。这是因为消息回调函数之前已经被调用过，保存了上下文和参数了，如果之前没有调用，这里就没有输出。
</script>
</body>
</html>