Oracle JET开发遇Uncaught TypeError: fireCustomEvent未定义问题求解决

错误原因 #

这个报错的核心是**timerIncrement函数执行时的this指向并非PageModule的实例**：当你直接把this.timerIncrement传入setInterval作为回调时，函数会在全局上下文（而非类实例上下文）中运行，导致this.eventHelper为undefined，自然无法调用fireCustomEvent方法。

解决方案 #

方案1：用箭头函数绑定上下文 #

在setInterval中用箭头函数包裹timerIncrement调用，箭头函数会自动继承当前类实例的this指向：

this.idleInterval = setInterval(() => this.timerIncrement(), 5000);

方案2：提前绑定this到方法 #

方式一：构造函数内手动绑定

在构造函数中通过bind把timerIncrement的this固定为类实例：

constructor(context) {
  this.eventHelper = context.getEventHelper();
  // 绑定this到timerIncrement
  this.timerIncrement = this.timerIncrement.bind(this);
  this.idleInterval = setInterval(this.timerIncrement, 5000);
}

方式二：用箭头函数定义类方法

直接把timerIncrement定义为箭头函数类方法，确保它始终指向类实例：

timerIncrement = () => {
  console.log(idleTime);
  idleTime = idleTime + 1;
  if (idleTime > 0) {
    console.log(this.eventHelper);
    this.eventHelper.fireCustomEvent('openDialog', {});
  }
}

优化后的完整代码 #

另外建议把全局变量idleTime改为类实例属性，避免全局污染，同时修正鼠标/键盘事件的上下文问题：

define([], () => {
  'use strict';

  class PageModule {
    constructor(context) {
      this.eventHelper = context.getEventHelper();
      this.idleTime = 0;

      // 用箭头函数绑定timerIncrement的上下文
      this.idleInterval = setInterval(() => this.timerIncrement(), 5000);

      // 绑定鼠标/键盘事件到实例上下文
      $(document).mousemove(() => { this.idleTime = 0; });
      $(document).keypress(() => { this.idleTime = 0; });
    }

    timerIncrement() {
      console.log(this.idleTime);
      this.idleTime += 1;
      if (this.idleTime > 0) {
        console.log(this.eventHelper);
        this.eventHelper.fireCustomEvent('openDialog', {});
      }
    }
  }

  return PageModule;
});

内容的提问来源于stack exchange，提问作者mu shaikh