AngularJS中自定义防抖函数返回的箭头函数未执行的原因排查

你的问题核心出在防抖函数的调用逻辑和设计上——当前的写法不仅没执行返回的箭头函数，还完全没用到防抖机制的核心原理，导致逻辑根本跑不起来。

为什么返回的箭头函数从未执行？ #

先看你的模板调用：

<input (input)="debounce(resolveInput, 1000, $event)" />

每次input事件触发时，Angular会直接执行debounce(resolveInput, 1000, $event)这个表达式。你的debounce函数确实返回了一个箭头函数，但这个返回值并没有被调用——你只是生成了这个函数，但没让它运行，所以里面的clearTimeout、setTimeout这些核心逻辑完全没机会触发。

更关键的错误：每次输入都重建防抖逻辑 #

就算你改成debounce(...)($event)（调用返回的函数），这个写法依然无效：因为每次input事件都会重新调用debounce，创建一个全新的debounceTimer变量。每个防抖函数实例都有独立的定时器，新输入根本无法重置之前的定时器，相当于防抖完全失效。

正确的实现方式 #

防抖的核心是让同一个函数实例被重复调用，这样才能共享同一个定时器变量，实现“新输入重置定时器”的效果。我们需要提前创建好绑定目标函数的防抖实例，再在事件中复用它。

修改后的完整代码如下：

TypeScript 组件代码

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

@Component({
  // 你的组件元数据（比如selector、templateUrl等）
})
export class YourComponent implements OnInit {
  // 提前声明防抖后的函数实例
  public debouncedResolveInput!: (event: Event) => void;

  ngOnInit(): void {
    // 初始化时创建防抖函数实例，后续复用这个实例
    this.debouncedResolveInput = this.debounce(this.resolveInput, 1000);
  }

  // 重构防抖函数：不要直接传event，让返回的函数接收事件参数
  private debounce = (func: (value: string) => void, delay: number) => { 
    let debounceTimer: number | undefined; 
    // 返回的函数会被重复调用，共享同一个debounceTimer
    return (event: Event) => { 
      clearTimeout(debounceTimer); 
      // 立即提取输入值，避免Angular清理事件对象后无法访问
      const inputValue = (event.target as HTMLInputElement).value;
      debounceTimer = setTimeout(() => {
        // 确保this指向组件实例
        func.call(this, inputValue);
      }, delay); 
    }; 
  }; 

  public resolveInput(value: string) { 
    console.log('resolved', value); 
  }
}

模板代码

<input (input)="debouncedResolveInput($event)" />

额外注意点 #

1. 不要直接传递$event给防抖函数：Angular中的DOM事件对象可能会被复用或清理，如果你在setTimeout回调中再访问原event.target，大概率会得到null或错误值。正确做法是在返回的函数中立即提取需要的值。
2. 必须复用防抖函数实例：只有让同一个防抖函数被多次调用，才能保证定时器变量被共享，真正实现防抖的“延迟执行+重置定时器”效果。

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