求助：将节流函数移入JavaScript类后无法运行的问题

Hi there! 作为JavaScript类的新手遇到这种问题太正常啦，我来帮你捋清楚问题出在哪，以及怎么解决~

首先咱们先拆解下核心问题：当把节流函数移入类中后无法执行，主要有两个关键原因需要注意：

1. 类中方法的this绑定与闭包作用域问题 #

当节流函数作为类方法存在时，如果用普通函数定义，调用时this的指向很容易丢失；同时节流函数里的闭包变量（比如time）的作用域，也和全局定义时的逻辑不一样，这会直接导致节流判断失效。

2. transitioning变量的未定义隐患 #

你原来的节流函数里用到了!transitioning，但代码里没看到这个变量的定义——如果它默认是undefined，!undefined是true暂时不会报错，但如果后续这个变量没正确初始化，也会导致函数不执行。

接下来给你两种可行的解决方案：

方案一：用箭头函数定义类方法，自动绑定this #

箭头函数会自动绑定类实例的this，能避免作用域丢失的问题，同时闭包变量的逻辑也能正常工作：

class ScrollHandler {
  constructor() {
    // 初始化transitioning变量（根据你的业务需求设置初始值）
    this.transitioning = false;
    // 绑定节流后的滚动事件
    window.addEventListener('scroll', this.throttle(this.scrollEvent, 50));
  }

  scrollEvent = () => {
    console.log('test');
  }

  throttle = (fn, wait) => {
    let time = Date.now();
    const self = this; // 保存类实例的this指向
    return function() {
      // 使用类实例的transitioning变量
      if ((time + wait - Date.now()) < 0 && !self.transitioning) {
        fn();
        time = Date.now();
      }
    }
  }
}

// 实例化类，启动逻辑
new ScrollHandler();

方案二：用普通函数方法，手动绑定this #

如果更习惯用普通函数定义类方法，需要在构造函数里手动绑定this，确保作用域正确：

class ScrollHandler {
  constructor() {
    this.transitioning = false;
    // 手动绑定scrollEvent的this，再传入节流函数
    const throttledScroll = this.throttle(this.scrollEvent.bind(this), 50);
    window.addEventListener('scroll', throttledScroll);
  }

  scrollEvent() {
    console.log('test');
  }

  throttle(fn, wait) {
    let time = Date.now();
    const self = this;
    return function() {
      if ((time + wait - Date.now()) < 0 && !self.transitioning) {
        fn();
        time = Date.now();
      }
    }
  }
}

new ScrollHandler();

关键提醒 #

• 类中的箭头函数方法会自动绑定实例this，普通函数方法则需要手动用bind或者在构造函数中绑定，否则this会指向调用它的上下文（比如window），导致逻辑失效。
• 节流函数里的time是闭包变量，每次调用throttle都会创建独立的闭包，确保节流的时间判断逻辑正确。
• 一定要把transitioning定义为类实例的属性（或者全局变量，更推荐前者），避免出现未定义的情况打断函数执行。

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