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函数的应用场景非常广泛。 考虑以下几个例子：
-
初始化操作： 比如只需要初始化一次的第三方库，或者只需要加载一次的配置文件。
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" -
事件监听： 比如只需要触发一次的事件监听，比如只需要在页面加载完成后执行一次的操作。
const pageLoadHandler = once(() => { console.log("Page loaded!"); }); window.addEventListener("load", pageLoadHandler); // 页面加载完成后，只会输出一次 "Page loaded!" -
防止重复提交： 在表单提交时，可以使用
once
函数来防止用户重复提交表单。const submitForm = once(() => { // 提交表单的逻辑 console.log("Submitting form..."); // ... }); document.getElementById("submitButton").addEventListener("click", submitForm); // 用户点击提交按钮后，只会提交一次表单 -
缓存数据：
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函数在需要确保某个函数只执行一次的任何场景下都非常有用。 它可以提高代码的可维护性和性能，避免不必要的重复操作。
