ionic3 устанавливает тайм-аут для ионного входа по адресу поиска

Question

Когда пользователь вводит адрес на входе ion, я хочу установить время на 500 мс вместо того, чтобы продолжать вызывать HTTP-запрос для каждого из ключей. То, что он делает сейчас, это продолжает вызывать http-запрос 15 раз, если я нажимаю 15 раз на клавиатуре. И каждый раз, когда он ищет новый адрес, я хочу очистить все в массиве, но теперь он не очищается. Прямо сейчас я Ctrl + V, чтобы вставить адрес, так что будет два нажатия клавиш, и searchAddress () будет вызван дважды, и первый раз массив addressSearchRslts не очищается, как вы можете видеть из изображения ниже:

Это вывод консоли при вызове searchAddress ():

Мне нужно, чтобы «1/84 solomon rd» вызывал только searchAddress () ONCE

Я знаю, что это вызывается дважды из-за поведения нажатия клавиши. Есть ли способ добиться, чтобы searchAddress () вызывался только один раз, используя setTimeout ()

my .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;
}

my 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;
  }