当前位置:首页 > JavaScript

js实现once

2026-03-14 16:07:27JavaScript

js实现once

实现 once 函数的方法

在 JavaScript 中,once 函数通常用于确保某个函数只能被调用一次,后续调用不会再次执行。以下是几种实现方式:

js实现once

使用闭包和标志位

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

使用高阶函数

const once = (fn) => {
  let executed = false;
  return (...args) => {
    if (!executed) {
      executed = true;
      return fn(...args);
    }
  };
};

使用 Proxy

function once(fn) {
  let called = false;
  return new Proxy(fn, {
    apply(target, thisArg, args) {
      if (!called) {
        called = true;
        return Reflect.apply(target, thisArg, args);
      }
    }
  });
}

使用 lodash 的 _.once

如果项目中已经使用了 lodash,可以直接使用其提供的 _.once 方法:

const _ = require('lodash');
const initialize = _.once(() => {
  console.log('Initialized');
});

注意事项

  • 确保 once 包装的函数在第一次调用时正确执行,后续调用不会产生副作用。
  • 如果需要保留 this 绑定,使用 applycall 方法确保上下文正确。
  • 如果函数需要返回结果,确保只在第一次调用时返回有效值。

这些方法都能有效实现 once 功能,具体选择取决于项目需求和个人偏好。闭包方法是最常见和简单的实现方式。

标签: jsonce
分享给朋友:

相关文章

js如何实现继承

js如何实现继承

原型链继承 通过将子类的原型指向父类的实例实现继承。子类实例能够访问父类原型上的属性和方法。 function Parent() { this.name = 'parent'; } Parent…

原生js实现轮播图

原生js实现轮播图

基本结构搭建 HTML部分需要包含轮播图容器、图片列表及导航按钮。结构示例如下: <div class="slider-container"> <div class="slid…

js实现vr

js实现vr

使用WebXR API实现VR体验 WebXR是浏览器中实现VR和AR体验的标准API,它取代了早期的WebVR。现代浏览器如Chrome、Edge和Firefox已支持WebXR。 // 初始化W…

js实现预览

js实现预览

文件上传预览实现 使用JavaScript实现文件上传预览功能,可以通过FileReader对象读取文件内容并显示预览。以下代码支持图片、文本和PDF文件的预览: // HTML部分需要包含inpu…

js实现跑马灯

js实现跑马灯

实现跑马灯效果 使用HTML和JavaScript可以轻松实现跑马灯效果。以下是两种常见的实现方式: HTML结构 <div id="marquee"> <span>…

js 实现滚动

js 实现滚动

实现滚动的方法 使用 window.scrollTo() window.scrollTo() 方法可以滚动到文档中的特定位置。可以指定 x 和 y 坐标,或者使用平滑滚动的选项。 // 滚动到指定位…