竟能让函数只执行一次？分享 1 段优质 JS 代码片段！

本内容首发于工粽号：程序员大澈，每日分享一段优质代码片段，欢迎关注和投稿！

大家好，我是大澈！

本文约 700+  字，整篇阅读约需 1 分钟。

今天分享一段优质 JS 代码片段，确保某函数在某场景中只会执行一次。

老规矩，先阅读代码片段并思考，再看代码解析再思考，最后评论区留下你的见解！

export function implementOnce(fn) {
    // 利用闭包判断函数是否执行过
    let called = false;
    return function() {
        if(!called) {
            called = true;
            fn.apply(this, arguments);
        }
    }
}

const initialize = implementOnce(() => {
    console.log('Initialization done');
});
initialize(); // 输出: Initialization done
initialize(); // 无输出
initialize(); // 无输出

分享原因

这段代码实现了一个只执行一次的函数，通常被称为“once”模式。

它通过闭包来跟踪函数是否已经被调用过。

通过这种方式，我们可以确保特定函数在整个生命周期中只执行一次，避免重复执行带来的副作用或性能问题。

代码解析

1. export function implementOnce(fn) {}

定义一个函数 implementOnce，接收一个函数 fn 作为参数。

使用 export 关键字使该函数可以在其他模块中导入使用。

2. let called = false;

定义一个局部变量 called，初始值为 false，用于标记函数是否已被调用过。

3. return function() {}

返回一个匿名函数，该匿名函数闭包了 called 和 fn。

闭包使得局部变量能够在函数执行结束后依然存在，这是因为闭包的作用域链会保存这些变量的引用。

4. fn.apply(this, arguments);

使用 fn.apply(this, arguments) 来调用传入的函数 fn，并传递当前上下文和参数。

5. 要区别与防抖节流

一次性函数：确保函数只执行一次，适用于初始化操作，避免多次执行引起的副作用。

防抖：等待事件停止触发后执行函数，适用于用户输入或窗口调整等场景，减少频繁触发。

节流：在规定时间内只允许函数执行一次，适用于滚动、鼠标移动等高频率事件，控制执行频率。

- end -