JSonce函数只执行一次方法详解

本篇文章给大家分享《JS中使用once创建只执行一次的函数方法如下：function once(fn) { let called = false; return function(...args) { if (!called) { called = true; return fn.apply(this, args); } }; } // 使用示例 const myFunction = once(() => { console.log('只执行一次'); }); myFunction(); // 输出：只执行一次 myFunction(); // 无输出说明：once 是一个高阶函数，接受一个函数 fn 作为参数。它返回一个新的函数，在调用时检查是否已经执行过。如果未执行过，就执行原函数并标记为已执行；如果已执行过，则不再执行。用途：适用于只需要执行一次的初始化逻辑、事件监听器等场景。SEO优化标题（20字以内）：JS once函数只执行一次实现方法》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

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

好了，本文到此结束，带大家了解了《JSonce函数只执行一次方法详解》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！