Angular 信号在 effect() 中使用 debounce

发布于07月02日

我有一个绑定到输入域的信号.我正在try 为earchTerm定义一个ffect()，但因为它是用户输入，所以我想go 掉这个效果(即rxjs)，这样搜索就不会在每次击键时发生.我不清楚如何做到这一点，文档也没有真正涵盖这种情况.

<input [ngMode]="searchTerm()" (ngModelChnge)="searchTerm.set($event)">个

effect(() => { if (this.searchTerm() !== '') { this.search(); } });个

推荐答案

在信号中没有内置的debounce 解决方案.但是，您可以创建自定义函数来执行此操作:

function debouncedSignal<T>(input: Signal<T>, timeOutMs = 0): Signal<T> {
  const debounceSignal = signal(input());
  effect(() => {
    const value = input();
    const timeout = setTimeout(() => {
      debounceSignal.set(value);
    }, timeOutMs);
    return () => {
      clearTimeout(timeout);
    };
  });
  return debounceSignal;
}

const itemsList = [
  { name: 'Product A', category: 'Category 1' },
  { name: 'Product B', category: 'Category 2' },
  { name: 'Product C', category: 'Category 1' },
];

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [CommonModule, FormsModule],
  template: `
    <input [ngModel]="searchTerm()" (ngModelChange)="searchTerm.set($any($event))">
    <ul>
      <li *ngFor="let item of items">
        {{item.name}}
      </li>
    </ul>
  `,
})
export class App {
  items = itemsList;

  searchTerm = signal('');

  debounceSearchValue = debouncedSignal(this.searchTerm, 500);

  constructor() {
    effect(() => {
      this.search(this.debounceSearchValue());
    });
  }

  private search(value: string): void {
    if (!value) {
      this.items = itemsList;
    }

    const query = value.toLowerCase();

    this.items = itemsList.filter(
      (item) =>
        item.name.toLowerCase().includes(query) ||
        item.category.toLowerCase().includes(query)
    );
  }
}

这种解决方案非常复杂，所以我建议使用RxJS来获得更干净、更高效的代码