在揭示模块模式中使用Timer回调更新公共属性的实现问题

嘿，我看你正在尝试给这个IIFE模块加个回调机制，用来切换私有属性isLoaded，还得让外部能访问到更新后的值对吧？我帮你调整了代码，完美满足你的需求：

修改后的完整模块代码 #

var Module = (function () {
    // 私有状态属性
    var isLoaded = false;
    var timer = null;
    // 存储外部注册的回调函数，支持多回调
    var loadStateCallbacks = [];

    var _privateMethod = function () {
        console.log('hello from private')
    }

    // 私有方法：切换状态并触发所有回调
    var _toggleLoadState = function() {
        isLoaded = !isLoaded;
        // 遍历执行所有注册的回调，传递最新状态
        loadStateCallbacks.forEach(callback => {
            typeof callback === 'function' && callback(isLoaded);
        });
    }

    var publicMethod = function(){
        console.log('in public method')
        _privateMethod();
    }

    var start = function(){
        console.log('starting state toggle process...');
        // 模拟异步操作：2秒后首次切换状态，之后每2秒切换一次
        timer = setTimeout(() => {
            _toggleLoadState();
            timer = setInterval(_toggleLoadState, 2000);
        }, 2000);
    }

    // 公共方法：注册状态变化回调
    var onLoadStateChange = function(callback) {
        if (typeof callback === 'function') {
            loadStateCallbacks.push(callback);
            // 注册时立即触发一次，让外部获取初始状态
            callback(isLoaded);
        }
    }

    // 公共方法：主动获取当前状态
    var getLoadState = function() {
        return isLoaded;
    }

    // 公共方法：停止状态切换，清理定时器
    var stop = function() {
        if (timer) {
            clearTimeout(timer);
            clearInterval(timer);
            timer = null;
        }
    }

    // 暴露公共API
    return {
        publicMethod: publicMethod,
        start: start,
        stop: stop,
        onLoadStateChange: onLoadStateChange,
        getLoadState: getLoadState
    }
})();

如何使用这个模块 #

1. 监听状态变化（通过回调） #

// 注册回调函数，每次isLoaded切换时都会收到通知
Module.onLoadStateChange(function(currentState) {
    console.log('当前isLoaded状态:', currentState);
});

2. 启动状态切换流程 #

Module.start();

3. 主动获取当前状态 #

// 比如3秒后主动查询状态
setTimeout(() => {
    console.log('主动查询isLoaded:', Module.getLoadState());
}, 3000);

4. 停止状态切换 #

// 不需要的时候记得停止，避免内存泄漏
Module.stop();

关键改动说明 #

• 新增loadStateCallbacks数组：用来存储外部注册的回调函数，支持同时监听多个回调
• 新增_toggleLoadState私有方法：统一处理状态切换逻辑，并触发所有回调，确保状态变化时外部能及时收到通知
• 新增onLoadStateChange公共方法：让外部可以注册回调，并且注册时立即触发一次，保证外部能拿到初始状态
• 新增getLoadState公共方法：允许外部主动获取当前状态，灵活满足不同场景需求
• 完善start和新增stop方法：用定时器模拟异步状态切换，同时提供清理机制，避免内存泄漏

内容的提问来源于stack exchange，提问作者jrich523