javascript闭包怎样实现回调队列

function createCallbackQueue() {
    const queue = []; // 这个数组就是闭包要“记住”的关键变量

    // 添加回调函数到队列
    function add(callback) {
        if (typeof callback === 'function') {
            queue.push(callback);
            console.log(`[Queue] Added a callback. Current queue size: ${queue.length}`);
        } else {
            console.warn('[Queue] Attempted to add non-function to queue.');
        }
    }

    // 执行队列中的所有回调
    function run() {
        console.log(`[Queue] Starting to process ${queue.length} callbacks...`);
        while (queue.length > 0) {
            const callback = queue.shift(); // 取出队列中的第一个回调
            try {
                callback(); // 执行它
            } catch (error) {
                console.error('[Queue] Error executing callback:', error);
            }
        }
        console.log('[Queue] All callbacks processed.');
    }

    // 返回一个包含add和run方法的对象，这两个方法都“闭包”了queue变量
    return {
        add: add,
        run: run
    };
}

// 实例化一个队列
const myTaskQueue = createCallbackQueue();

// 演示如何利用闭包添加带上下文的回调
for (let i = 0; i < 3; i++) {
    // 这里的匿名函数就是一个闭包，它“记住”了当前i的值
    myTaskQueue.add(function() {
        console.log(`Task ${i} is executing. This was created when i was ${i}.`);
    });
}

// 再添加一个不同类型的回调
function logMessage(msg) {
    return function() { // 这个返回的函数也是个闭包，记住了msg
        console.log(`A specific message: ${msg}`);
    };
}
myTaskQueue.add(logMessage("Hello from a closure!"));

// 运行队列
myTaskQueue.run();

// 再次添加和运行，队列会清空后重新开始
console.log("\n--- Running queue again with new tasks ---");
myTaskQueue.add(function() { console.log("Another task after first run."); });
myTaskQueue.run();

createCallbackQueue

add

run

add

run

createCallbackQueue

queue

queue

createCallbackQueue

add

run

for (let i = 0; i < 3; i++)

let

i

myTaskQueue.add(function() { console.log(...) });

i

function fetchDataAndDisplay(url, targetElementId) {
    // 这里的匿名函数是闭包，它“记住”了url和targetElementId
    fetch(url)
        .then(response => response.json())
        .then(data => {
            const targetElement = document.getElementById(targetElementId);
            if (targetElement) {
                targetElement.textContent = `Data from ${url}: ${JSON.stringify(data)}`;
                console.log(`Displayed data for ${url} in #${targetElementId}`);
            } else {
                console.warn(`Element with ID '${targetElementId}' not found.`);
            }
        })
        .catch(error => {
            console.error(`Error fetching ${url}:`, error);
        });
}

// 假设我们有这样的HTML结构：
// <div id="data1"></div>
// <div id="data2"></div>

// 实际调用时，每个fetchDataAndDisplay都会创建不同的闭包
// 每个闭包都独立地“记住”了它自己的url和targetElementId
// fetchDataAndDisplay('/api/data/users', 'data1');
// fetchDataAndDisplay('/api/data/products', 'data2');

fetchDataAndDisplay

fetch

.then()

fetchDataAndDisplay

url

targetElementId