美文网首页
jQuery粗略源码解析3 异步队列

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

作者: 波拉拉 | 来源:发表于2020-02-23 12:21 被阅读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 回调函数列表含有的方法
    • .add() 添加一个或一组到回调函数列表中
    • .remove() 移除一个或一组回调函数
    • fire() 触发回调函数列表中的所有函数
    • empty() 移除所有回调函数
    • disable() 禁用回调函数列表(阻止fire和add)
    • lock() 锁定回调函数列表(阻止fire)
    • fireWith() 指定上下文触发所有回调函数
    • has() 指定回调函数是否在列表中
    • disabled() 是否禁用
    • locked()是否锁定
    • fired() 是否触发过

    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中的应用

    • promise() 返回一个异步队列的只读副本。
    • jQuery.ajax() 内部创建异步队列,最后返回异步队列的只读副本。
    • ready事件 内部创建一个回调函数列表存放ready监听函数,当触发时,调用fireWith()触发ready事件。

    相关文章

      网友评论

          本文标题:jQuery粗略源码解析3 异步队列

          本文链接:https://www.haomeiwen.com/subject/ilsgfhtx.html