ionic3 在搜索地址时为离子输入设置超时

Question

当用户在 ion-input 上输入地址时，我想将超时设置为 500 毫秒，而不是为每个 keyup 继续调用 http 请求。如果我在键盘上按键 15 次，它现在正在做的是继续调用 http 请求 15 次。每次它搜索新地址时，我都想清除数组中的所有内容，但现在它没有被清除。现在我按 Ctrl+V 粘贴地址，所以会有两次按键，searchAddress() 将被调用两次，addressSearchRslts 数组的第一次没有被清除，如下图所示：

这是调用 searchAddress() 时的控制台输出：

What I want is '1/84 solomon rd' should only call searchAddress() ONCE

我知道由于按键行为，它被调用了两次。有什么方法可以通过使用 setTimeout()

来实现仅调用一次 searchAddress()

我的.ts

@ViewChild('addressInput') addressInput;

addressSearchRslts = [];
searchAddress:string;

searchAddress(event: any){
    setTimeout(()=>{
      this.addressInput.setFocus();
    }, 500);
    this.addressSearchRslts.length=0;
    if(this.searchAddress.length<1){
      return;
    }
    this._service.searchAddress(this.searchAddress).subscribe(
      success=>{
        let searchRslts=success.addresses.slice(0, 100);
        searchRslts.forEach( (result )=>{
          let address = result;
          let addressInfo = address.house_number+' '+address.street+', '+address.district+' '+address.state+' '+address.postal_code+' '+address.country;
          this.addressSearchRslts.push( {data:address, title:addressInfo});
        });
      },err => console.log(err),
      () => console.log('search address finish')
    );
}

selectAddress(data){
    this.address.setValue(data.house_number+' '+data.street);
    this.city.setValue(data.district);
    this.state.setValue(data.state);
    this.postcode.setValue(data.postal_code);
    this.addressSearchRslts.length=0;
}

我的html

<ion-item>
      <ion-label stacked>Address</ion-label>
      <ion-input #addressInput id="addressField" type="text" formControlName="address" [(ngModel)]="searchAddress" (keyup)="searchAddress($event)"></ion-input>
</ion-item>
<div *ngIf="addressSearchRslts.length>0">
      <ion-item *ngFor="let addressSearchRslt of addressSearchRslts" (click)="selectAddress(addressSearchRslt.data)">
        <p ion-text text-wrap>{{addressSearchRslt.title}}</p> 
      </ion-item>
</div>

Answer 1

将您的服务调用移到 settimeout 并有一个布尔值来检查服务是否已被调用，使用这种方法，您的服务应该每 500 毫秒调用一次，无论您按下的键数如何

  @ViewChild('addressInput') addressInput;

  addressSearchRslts = [];
  searchAddress: string;
  searchCalled = false;

  searchAddress(event: any) {
    if (!this.searchCalled) {
      this.searchCalled = true;
      setTimeout(() => {
        this.addressInput.setFocus();
        this.addressSearchRslts.length = 0;
        if (this.searchAddress.length < 1) {
          return;
        }
        this._service.searchAddress(this.searchAddress).subscribe(
          success => {
            let searchRslts = success.addresses.slice(0, 100);
            searchRslts.forEach((result) => {
              let address = result;
              let addressInfo = address.house_number + ' ' + address.street + ', ' + address.district + ' ' + address.state + ' ' + address.postal_code + ' ' + address.country;
              this.addressSearchRslts.push({ data: address, title: addressInfo });
            });
          }, err => console.log(err),
          () => console.log('search address finish')
        );
        this.searchCalled = false;
      }, 500);
    }
  }

  selectAddress(data) {
    this.address.setValue(data.house_number + ' ' + data.street);
    this.city.setValue(data.district);
    this.state.setValue(data.state);
    this.postcode.setValue(data.postal_code);
    this.addressSearchRslts.length = 0;
  }

ionic3 在搜索地址时为离子输入设置超时

ionic3 set timeout for ion-input on searching address

settimeout

ionic-framework

ionic3

angular