javascript - 输入变化 Angular 延迟

Question

你好，我在我的应用程序中有一个输入，它会在每次敲击时触发，但我想要一些延迟，例如。 1 秒后触发我的搜索功能，这样它就不会发送多个请求

我的 Html 代码

<input id="musicsearch"
  (input)="onSearchChange($event.target.value)"  
  ng-model-options="{debounce:1000}" 
  class="form-control mr-sm-2"style="width: 100%;"
  type="text"placeholder="Search">

component.ts(处理变化)

 onSearchChange(searchValue : string ) {    
    this.router.navigate(['/search', searchValue]);      
  }

我是 Angular 的新手，我找不到解决我的问题的方法，我想在用户停止输入时触发它

Answer 1

  private modelChanged: Subject<string> = new Subject<string>();
  private subscription: Subscription;
  debounceTime = 500;

  ngOnInit(): void {
    this.subscription = this.modelChanged
      .pipe(
        debounceTime(this.debounceTime),
      )
      .subscribe(() => {
        this.functionToBeCalled();
      });
  }
  functionToBeCalled() {
    console.log('Called After 500ms');
  }

  inputChanged() {
    this.modelChanged.next("Akshay Is Awesome")
  }

  ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }

html文件 <input type="text" (keydown)="inputChanged()">

稍后试试这个谢谢我:)