JavaScript类方法调用问题：test.onload()未按预期延迟执行

你的代码核心问题是把「事件注册」写成了「立即调用函数」，导致test.onload()执行时直接触发逻辑，完全和3秒延迟无关。原代码的两个关键错误：

1. onload被定义成了直接执行的箭头函数，调用test.onload(fn)时会立刻执行函数体
2. 构造函数里的this.onload;只是引用方法，既没执行也没关联用户传入的回调

修复方案（事件监听模式） #

这种方式支持注册多个回调，更贴近标准事件机制：

export default class TEST {
  constructor() {
    // 存储所有注册的回调函数
    this._loadCallbacks = [];
    // 模拟fetching完成后触发事件
    setTimeout(() => {
      this._triggerLoad();
    }, 3000);
  }

  // 注册load事件回调
  onload(fn) {
    if (typeof fn === 'function') {
      this._loadCallbacks.push(fn);
    }
  }

  // 内部触发load事件的方法
  _triggerLoad() {
    console.log('loaded event');
    // 执行所有注册的回调
    this._loadCallbacks.forEach(callback => callback());
  }
}

使用方式不变，此时3秒后才会触发所有回调：

const test = new TEST();

test.onload(function () {
  console.log('from instance');
});

简化方案（单个回调场景） #

如果只需要支持一个回调，可以简化逻辑：

export default class TEST {
  constructor() {
    this._loadCallback = null;
    setTimeout(() => {
      this._triggerLoad();
    }, 3000);
  }

  onload(fn) {
    this._loadCallback = typeof fn === 'function' ? fn : null;
  }

  _triggerLoad() {
    console.log('loaded event');
    this._loadCallback?.(); // 可选链语法，避免回调不存在时报错
  }
}

内容的提问来源于stack exchange，提问作者Nurpais Orozulbaev