jQuey之Callbacks、Deferred实现

最新推荐文章于 2025-08-15 09:50:45 发布

weixin_34290352

最新推荐文章于 2025-08-15 09:50:45 发布

阅读量142

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5cf4dfe56fb9a07eed34ea46

本文深入探讨了jQuery中Callbacks和Deferred对象的自定义实现，详细解析了Callbacks如何管理回调函数，以及Deferred如何协调异步操作的成功、失败和进度通知。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

作者：zhangl
原文：jQuey之Callbacks实现

jQuery.myCallbacks = function () {
    // 这里主要是options参数为'once；memory；once memory'
    // 获取options
    var options = arguments[0] || '';
    // 搜集fire被调用时，传入的参数
    var arg = [];
    // 搜集add传入的函数
    var list = [];
    // 判断cb是否调用过fire
    var isFired = false;
    // 当前fire调用的函数索引
    var fireIndex = 0;
    
    function fire() {
        // 循环执行add添加的函数
        for (; fireIndex < list.length; fireIndex++) {
            list[fireIndex].apply(window, arg);
        }
        // 如果options是once，清空list数组
        if (options.indexOf('once') !== -1) {
            list.length = 0;
            fireIndex = 0;
        }
    }
    
    return {
        add: function (func) {
            list.push(func);
            // options为memory并且fire被调用用过
            if (options.indexOf('memory') !== -1 && isFired) {
                fire();
            }
            return this;
        },
        fire: function () {
            arg = arguments;
            isFired = true;
            fireIndex = 0;
            fire();
        }
    };
};
复制代码

jQuery.myDeferred = function () {
    var arrCallbacks = [
        [jQuery.Callbacks('once memory'), 'done', 'resolve'],
        [jQuery.Callbacks('once memory'), 'fail', 'reject'],
        [jQuery.Callbacks('memory'), 'progress', 'notify']
    ];
    var deferred = {};
    // 是否是pending状态
    var isPending = true;
    for (var i = 0; i < arrCallbacks.length; i++) {
        // deferred绑定done, fial, progress API
        deferred[arrCallbacks[i][1]] = (function (index) {
            return function (func) {
                arrCallbacks[i][0].add(func);
            }
        })(i);
        // deferred绑定resolve, reject, notify API
        deferred[arrCallbacks[i][2]] = (function (index) {
            return function () {
                if (isPending) {
                    arrCallbacks[i][0].fire.apply(window, arguments);
                    arrCallbacks[i][2] === 'resolve' || arrCallbacks[i][2] === 'reject' ? isPending = false : '';
                }
            }
        })(i);
    }
    
    return deferred;
};
复制代码