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
函数的应用场景非常广泛。 考虑以下几个例子：
初始化操作： 比如只需要初始化一次的第三方库，或者只需要加载一次的配置文件。
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
函数在需要确保某个函数只执行一次的任何场景下都非常有用。 它可以提高代码的可维护性和性能，避免不必要的重复操作。
以上就是js 如何用once创建只执行一次的函数的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/231312.html
微信扫一扫 
支付宝扫一扫 
