Angular 等待文本框中输入法的所有API请求调用，如图所示

我正在调用一个API来验证这个数字是否存在于我们的数据库中。我正在调用textbox的（输入）事件上的方法，该方法将调用API。现在，如果我在输入框“1234”中键入，那么将进行四个API调用，第一个用于“1”，第二个用于“12”，第三个用于“123”，第四个用于“1234”。现在，若数据库中不存在“123”，API将返回“true”，按钮将被启用；若数据库中存在“1234”，API将返回“false”，按钮将被禁用。问题是在几秒钟内，该按钮将被启用，因为“123”为真，而在文本框中为“1234”，因为第四个请求的API调用仍处于挂起状态。所以按钮将为“1234”启用，文本框中的此值将用于我们不希望的进一步过程。有没有更好的办法来处理这类案件？

如果你需要立即处理，你就必须去处理

这就像聊天应用程序中的

键入…

，只要用户在设备键盘上键入，您就可以显示它

---

另一方面，当您发送http请求时，您必须等待服务器解决您的请求。

在某些情况下，系统必须在用户请求时向用户提供建议 打字。将每个请求的请求发送到服务器时 开销所以，当用户完成键入时向服务器发送请求将 表现出色。我们可以检测用户是否输入或完成 他通过延迟更改事件来输入

      <input (ngModelChange)="displayName()" [(ngModel)]="name"/>
      import { Component } from '@angular/core';
      import { NgZone } from '@angular/core';

         @Component({
         selector: 'my-app',
          template: `
           <h4>Type something in below text box</h4>
           <input (ngModelChange)="displayName()" [(ngModel)]="name"/>
           <h4>Value : {{name1}} </h4>
          `
        })
        export class AppComponent {
           name: string = '';
           name1: string = '';
           _timeout: any = null;

           constructor(public lc: NgZone) {

           }

           displayName() {
             this._timeout  = null;
             if(this._timeout){ //if there is already a timeout in process cancel it
               window.clearTimeout(this._timeout);
             }
             this._timeout = window.setTimeout(() => {
                this._timeout = null;
                this.lc.run(() => this.name1 = this.name);
             },1000);
          }
        }

从'@angular/core'导入{Component}；
从“@angular/core”导入{NgZone}；
@组成部分({
选择器：“我的应用程序”，
模板：`
在下面的文本框中键入内容
值：{{name1}
`
})
导出类AppComponent{
名称：字符串=“”；
name1:string=''；
_超时：any=null；
建造商（公共lc:NgZone）{
}
displayName（）{
这是.\u timeout=null；
if（this.\u timeout）{//如果进程中已经有超时，请取消它
window.clearTimeout（此.\u超时）；
}
这个._timeout=window.setTimeout（（）=>{
这是.\u timeout=null；
this.lc.run（（）=>this.name1=this.name）；
},1000);
}
}

您可以尝试使用的概念。它会将方法（在您的情况下是HTTP调用）的执行延迟一段时间

---

另一种方法是使用

debounceTime

和

switchMap

RxJs操作符。

这是一种丑陋的方法。更好地使用RXJS这个延迟的问题，他需要即时的互动，所以你们如何推荐他去Bouncing