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;
  };
}

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

行者AI

行者AI绘图创作，唤醒新的灵感，创造更多可能

100

查看详情

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

以上就是js 如何用once创建只执行一次的函数的详细内容，更多请关注php中文网其它相关文章！