js 如何用once创建只执行一次的函数

once函数通过闭包维护called状态，确保传入函数只执行一次，首次调用时执行并返回结果，后续调用直接返回undefined；2. 除闭包外，也可用对象属性存储状态实现once，原理相同但写法不同；3. 实际应用包括初始化操作、事件监听、防止表单重复提交和数据缓存，均用于需函数仅执行一次的场景，提升性能与可维护性。

用

once

创建的函数，顾名思义，只会执行一次。这在很多场景下都非常有用，比如初始化操作，或者只需要触发一次的事件监听。

用

once

创建只执行一次的函数，核心就是利用闭包来维护一个状态，判断函数是否已经被执行过。

function once(fn) {   let called = false;   return function(...args) {     if (!called) {       called = true;       return fn.apply(this, args);     }     return undefined; // 或者返回其他默认值，看你的需求   }; }  // 例子 function initialize() {   console.log("Initializing..."); }  const initOnce = once(initialize);  initOnce(); // 输出 "Initializing..." initOnce(); // 不会输出任何东西

如何理解

once

函数的工作原理？

once

函数本质上是一个高阶函数，它接收一个函数

fn

作为参数，并返回一个新的函数。这个新的函数内部维护了一个

called

变量，用于记录

fn

是否已经被调用过。

每次调用新的函数时，都会检查

called

的值。如果

called

为

false

，则将

called

设置为

true

，并调用

fn

。如果

called

为

true

，则直接返回

undefined

(或者其他你定义的默认值)，不再调用

fn

。

闭包在这里起到了关键作用，它使得

called

变量能够被新的函数访问和修改，即使

once

函数已经执行完毕。

除了闭包，还有其他实现

once

的方法吗？

当然有。虽然闭包是最常见和直观的方式，但你也可以使用其他方法，比如利用对象的属性来存储状态：

function once(fn) {   const obj = { called: false };   return function(...args) {     if (!obj.called) {       obj.called = true;       return fn.apply(this, args);     }     return undefined;   }; }

这种方式本质上也是维护了一个状态，只不过状态是存储在一个对象中，而不是通过闭包来实现。 选择哪种方式，取决于你的个人偏好和代码风格。 闭包通常被认为更简洁一些。

once

函数在实际开发中有什么应用场景？

once

函数的应用场景非常广泛。 考虑以下几个例子：

1. 初始化操作： 比如只需要初始化一次的第三方库，或者只需要加载一次的配置文件。

   const loadConfig = once(() => {   // 从文件中读取配置   console.log("Loading config...");   return { apiKey: "your_api_key" }; });  const config = loadConfig(); console.log(config.apiKey); // 输出 "your_api_key"  const config2 = loadConfig(); // 不会再次加载配置 console.log(config2.apiKey); // 输出 "your_api_key"

2. 事件监听： 比如只需要触发一次的事件监听，比如只需要在页面加载完成后执行一次的操作。

   const pageLoadHandler = once(() => {   console.log("Page loaded!"); });  window.addEventListener("load", pageLoadHandler); // 页面加载完成后，只会输出一次 "Page loaded!"

3. 防止重复提交： 在表单提交时，可以使用

   once

   函数来防止用户重复提交表单。

   const submitForm = once(() => {   // 提交表单的逻辑   console.log("Submitting form...");   // ... });  document.getElementById("submitButton").addEventListener("click", submitForm); // 用户点击提交按钮后，只会提交一次表单

4. 缓存数据：

   once

   也可以用于缓存数据，只在第一次请求时加载数据，后续直接从缓存中获取。

   const fetchData = once(async () => {   console.log("Fetching data from API...");   const response = await fetch("https://api.example.com/data");   const data = await response.json();   return data; });  async function useData() {   const data = await fetchData();   console.log(data); }  useData(); // 第一次调用会从 API 获取数据 useData(); // 后续调用直接从缓存获取数据

总之，

once

函数在需要确保某个函数只执行一次的任何场景下都非常有用。 它可以提高代码的可维护性和性能，避免不必要的重复操作。