当前位置:首页 > JavaScript

js实现 after

2026-01-31 21:32:03JavaScript

js实现 after

实现 after 方法

在 JavaScript 中实现 after 方法可以用于在某个函数被调用指定次数后再执行另一个函数。以下是几种实现方式:

js实现 after

使用闭包和计数器

function after(times, func) {
  let count = 0;
  return function(...args) {
    count++;
    if (count >= times) {
      return func.apply(this, args);
    }
  };
}

// 示例用法
const sayHello = after(3, () => {
  console.log('Hello!');
});

sayHello(); // 无输出
sayHello(); // 无输出
sayHello(); // 输出: Hello!

使用 ES6 类和装饰器模式

class After {
  constructor(times, func) {
    this.times = times;
    this.func = func;
    this.count = 0;
  }

  execute(...args) {
    this.count++;
    if (this.count >= this.times) {
      return this.func.apply(this, args);
    }
  }
}

// 示例用法
const sayHi = new After(2, () => {
  console.log('Hi!');
});

sayHi.execute(); // 无输出
sayHi.execute(); // 输出: Hi!

使用 Promise 实现异步版本

function afterAsync(times, func) {
  let count = 0;
  return function(...args) {
    return new Promise((resolve) => {
      count++;
      if (count >= times) {
        resolve(func.apply(this, args));
      }
    });
  };
}

// 示例用法
const greet = afterAsync(2, () => {
  return 'Greetings!';
});

greet().then(console.log); // 无输出
greet().then(console.log); // 输出: Greetings!

实现 lodash 风格的 after

如果需要与 lodash 的 _.after 方法保持兼容,可以这样实现:

function lodashAfter(times, func) {
  if (typeof func !== 'function') {
    throw new TypeError('Expected a function');
  }
  times = Math.max(times, 0);
  return function(...args) {
    if (--times < 1) {
      return func.apply(this, args);
    }
  };
}

// 示例用法
const logDone = lodashAfter(3, () => {
  console.log('Done!');
});

logDone(); // 无输出
logDone(); // 无输出
logDone(); // 输出: Done!

这些实现方式可以根据具体需求选择使用,闭包版本是最简洁的通用实现。

标签: jsafter
分享给朋友:

相关文章

js实现图片上传

js实现图片上传

图片上传的基本实现 使用HTML的<input type="file">元素配合JavaScript的File API可以实现图片上传功能。HTML部分需要创建一个文件选择输入框和一个用于…

js实现图片预览

js实现图片预览

使用FileReader API实现图片预览 通过FileReader对象读取用户选择的图片文件并显示预览: const input = document.getElementById('image…

js实现投球

js实现投球

实现投球动画的基本思路 使用JavaScript和CSS动画结合的方式模拟投球效果。核心是通过改变元素的位置、旋转和缩放属性,配合定时器或CSS过渡实现平滑动画。 创建基础HTML结构 <…

js实现视口

js实现视口

js实现视口检测的方法 使用JavaScript检测元素是否进入视口(viewport)可以通过Intersection Observer API或手动计算元素位置实现。以下是两种常见方法: Int…

js实现下拉菜单

js实现下拉菜单

使用HTML和CSS创建基础结构 HTML部分需要包含一个触发下拉的按钮和隐藏的下拉菜单内容: <div class="dropdown"> <button class="dr…

js进度条实现

js进度条实现

使用HTML和CSS创建基础结构 在HTML中创建一个容器元素用于显示进度条,通常使用<div>元素。CSS用于设置进度条的样式,包括宽度、高度、颜色和圆角等属性。 <div cl…