面试题：JavaScript 中闭包与回调函数结合使用场景

Question

请举例说明在 JavaScript 中闭包与回调函数结合使用的一个实际场景，并解释这样结合使用的好处。

Answer 1

实际场景举例

假设有一个需要在用户点击按钮后，经过一段时间（比如3秒）执行特定操作的场景。我们可以结合闭包和回调函数来实现。

function setupButtonClickListener() {
    let count = 0;
    const button = document.getElementById('myButton');
    button.addEventListener('click', function () {
        count++;
        setTimeout(function () {
            console.log(`按钮被点击了 ${count} 次，3秒后执行此操作`);
        }, 3000);
    });
}

setupButtonClickListener();

在上述代码中，setupButtonClickListener 函数内部定义了 count 变量以及一个点击事件监听器回调函数。点击事件监听器回调函数是一个闭包，它可以访问并修改 setupButtonClickListener 函数作用域内的 count 变量。同时，setTimeout 中的函数是一个回调函数，它在3秒后执行，并且依赖于闭包中的 count 变量。

结合使用的好处

1. 数据封装与状态保持：闭包允许在回调函数中访问和修改外部函数作用域中的变量，实现数据的封装和状态的保持。就像上述例子中，count 变量只能通过闭包内的逻辑进行修改，外部无法直接访问，保证了数据的安全性和独立性。
2. 延迟执行与动态逻辑：回调函数结合闭包可以实现延迟执行特定的操作，并且这个操作可以根据闭包内的状态变化而动态调整。例如上述代码中，每次点击按钮后，count 会增加，3秒后执行的回调函数输出的点击次数也会随之更新，满足了动态逻辑的需求。
3. 代码模块化与复用：这种结合方式可以将复杂的逻辑封装在函数内部，通过回调函数传递不同的执行逻辑，提高了代码的模块化程度和复用性。例如，我们可以将不同的延迟操作逻辑封装在不同的回调函数中，传递给相同的闭包结构，实现不同的功能。