Angular 5项目中Lodash throttle与debounce无法正常工作求助

我之前在Angular项目里也踩过一模一样的坑！你现在的问题核心在于没有正确使用Lodash节流防抖函数的返回值，还忽略了上下文绑定和函数引用保存的关键点，来一步步解决：

为什么你的写法没效果？ #

先拆解下你之前的尝试：

• throttle(this.testFunction, 100);：这行代码只是创建了一个节流后的函数，但你根本没执行它；另外直接传this.testFunction会丢失组件的上下文，就算执行了，testFunction里的this也不是组件实例。
• throttle(() => { this.testFunction(); }, 1000);：同样只是创建了节流函数，但没执行返回的函数；更糟的是如果每次触发事件都写这行，会每次生成新的节流函数，相当于每个新函数都有自己的定时器，完全起不到节流作用。

正确的实现步骤 #

1. 正确导入Lodash函数 #

Angular 5支持ES模块导入，推荐按需导入减小打包体积：

// 按需导入throttle
import throttle from 'lodash/throttle';
// 或者导入debounce
import debounce from 'lodash/debounce';

2. 保存节流/防抖后的函数引用 #

在组件类里定义一个属性来存储处理后的函数，一定要在组件初始化时创建一次，不能每次触发事件都重新创建：

import { Component, OnInit, OnDestroy } from '@angular/core';
import throttle from 'lodash/throttle';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit, OnDestroy {
  // 存储节流后的函数
  private throttledTest: Function;

  ngOnInit() {
    // 初始化节流函数，用箭头函数绑定组件上下文
    this.throttledTest = throttle(() => this.testFunction(), 1000);
  }

  // 你的业务函数
  testFunction() {
    console.log('终于执行啦！');
    // 这里可以访问组件的属性和方法，因为上下文已经绑定
  }

  // 比如在滚动/点击事件里调用节流后的函数
  handleScroll() {
    this.throttledTest();
  }

  // 组件销毁时清理节流函数，防止内存泄漏
  ngOnDestroy() {
    this.throttledTest.cancel();
  }
}

3. 在模板或事件绑定中使用 #

如果是模板里的DOM事件，直接绑定存储的节流函数：

<!-- 滚动事件触发节流函数 -->
<div class="scroll-container" (scroll)="throttledTest()">
  <!-- 内容 -->
</div>

<!-- 或者点击事件 -->
<button (click)="throttledTest()">点击测试节流</button>

额外注意事项 #

• 上下文绑定：一定要用箭头函数或者Function.bind(this)来确保testFunction里的this指向组件实例，不然访问组件属性会报错。
• 清理函数：在ngOnDestroy里调用节流/防抖函数的cancel()方法，销毁定时器，避免内存泄漏。
• debounce的用法和throttle完全一致：只需要把throttle换成debounce，逻辑完全相同。

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