Angular2 http.post setTimeout答案

【问题标题】：Angular2 http.post setTimeoutAngular2 http.post setTimeout
【发布时间】：2017-06-29 15:37:37
【问题描述】：

我有一个 ion-range（单选按钮），我正在获取数据并推送它，以便我可以在 mongodb 中搜索该数据并将其响应给客户端。但是每当用户拖动它（不立即离开）它时获取所有数据并在 mongodb 搜索 n 次，使其变慢。我想要做的是放置一个 setTime 以便在大约 1 秒用户放下按钮后，它会发送数据，而不是瞬时

HTML

  <ion-range min="0" max="200" pin="true" [(ngModel)]="distance" color="secondary" (ngModelChange)="Change()">
    <i class="fa fa-map-marker" range-left aria-hidden="true"></i>
    <i class="fa fa-map-marker" style="font-size:25px;" range-right aria-hidden="true"></i>

  </ion-range>

Change() {
var data = {
  distance: this.distance,
  lat: this.lat1,
  long: this.long1
}

this.http.post('http://localhost:xxxx/api/xxx', data)
  .map(res => res.json())
  .subscribe(data => {
    this.distanceArray = data;
  })


}

我猜在 } 和 ) 之间我需要设置 setTimeint 但我从未使用过它。你的想法是什么。

谢谢

【问题讨论】：

标签： angular ionic2 settimeout

【解决方案1】：

ion-range 有一个输入属性debounce，即

等待触发 ionChange 事件的时间（以毫秒为单位）每次更改范围值后。默认 0。

Ionic Range API documentation

我强烈建议使用服务而不是直接从组件发出 http 请求。

编辑

使用debounce 和ionChange 而不是ngModelChange

<ion-range min="0" max="200" pin="true" debounce="1000" [(ngModel)]="distance" color="secondary" (ionChange)="Change($event)">
.......
</ion-range>

【讨论】：

是的，你是对的，但我猜是因为 ngModelChange debounce 不起作用它仍然使 http.post 即时@Shanil Fernando