jQuery粗略源码解析3 异步队列

2020-02-23  本文已影响0人  波拉拉

异步队列模块用于异步任务和回调函数的解耦，为ajax模块，队列模块提供基础功能。
jQuery.ajax()负责创建异步队列，发送ajax请求，解析响应内容，回调交由异步队列管理。当ajax()请求成功、失败、完成时，将根据响应状态和解析结果，调用一部队列上相应的方法。
异步队列模块包括三部分：1 jQuery.callbacks() 回调函数列表 2 jQuery.Defferred 异步队列 3 jQuery.when。

1 jQuery.callbacks() 回调函数列表

1.1 支持的参数

参数： 参数为空时，可以被触发多次。

 function f1(value) {
        console.log("函数1"+value);
    }
    function f2(value) {
        console.log("函数2"+value);
    }
    var callbacks=$.Callbacks();
    callbacks.add(f1);
    callbacks.fire("执行1");//函数1执行
    callbacks.add(f2);
    console.log(callbacks);
    callbacks.fire("执行2");//函数1执行2 函数2执行2

参数： 参数为once时，回调函数列表只会被触发一次。

  var callbacks=$.Callbacks("once");
    callbacks.add(f1);
    callbacks.fire("执行1");//函数1执行
    callbacks.add(f2);
    callbacks.fire("执行2");//不执行 这个回调列表只执行一次

参数： 参数为memory时，后面添加的函数也会被添加并执行。

    var callbacks=$.Callbacks("memory");
    callbacks.add(f1);
    callbacks.fire("执行1");//函数1执行1 函数2执行1
//    后面添加的函数也会执行
    callbacks.add(f2);
    callbacks.fire("执行2");//函数1执行2 函数2执行2

参数： 参数为unique时，一个回调函数只能添加一次。
参数： 参数为stopOnFalse时，某个函数返回false时中断执行。

1.2 回调函数列表含有的方法

2 jQuery.Deferred() 异步队列

事实上jQuery中的Ajax就是一个异步队列。
执行过程：
①创建成功、失败、消息回调函数列表
②设定初始状态
③ 创建异步队列只读副本promise，包括：
done()添加函数到成功回调函数列表
fail()添加函数到失败回调函数列表
progress()添加函数到消息回调函数列表
state() Deferred对象的当前状态
then() 同时添加成功、失败、消息函数
alway() 将函数添加到成功和失败回调函数列表
promise() 返回当前异步队列的只读副本，或者为一个普通js对象增加只读副本中的方法并返回。
④创建异步队列
把上一步只读副本中的方法添加到异步队列中
再添加触发成功、失败、消息回调函数的方法 例如：resolve() reject() notify()等
⑤ 如果传入函数，则调用
⑥ 返回异步队列

 $.get("data.php")
        .done(function (data) {console.log(data);})//模拟数据
        .fail(function (data) {console.log("获取失败");});
    console.log($.get("data.php").state());//pending

3 jQuery.when()

当传入多个异步队列时，所有的队列时成功状态就执行成功回调，如果出现失败执行失败回调。

    $.when($.get("data.php?my=1"),$.get("data.php?my=2"),$.get("data.php?my=3"))
        .done(function () {
            console.log("成功");
        }).fail(function () {
            console.log("失败")
        });

4 异步队列在jQuery中的应用

上一篇下一篇

猜你喜欢

热点阅读