Angular 角速度几秒钟后触发（更改）滑块

使用一年范围的滑块。这是HTML部分：

<ngx-slider 
    [(ngModel)]="globalYearSelection" 
    [step]="1" 
    [filled]="false" 
    [min]="1990" 
    [max]="2015" 
    (change)="onChangeYear($event.value)">
</ngx-slider>

如您所见，当我更改滑块的值时，我会更新

this.globalYearSelection

，然后调用一个具有多个HTTP请求的函数来获取一些数据

但是，当我更改滑块的值时，滑块的每个步骤都会多次调用

this.getAllChartsData（）

我试着这样做：

  onChangeYear(value) {
    this.globalYearSelection = value;
    setTimeout(() => this.getAllChartsData(), 2000);
  }

为了确保只在2秒后触发HTTP请求，结果是等待2秒，然后立即触发所有我滑动的值的所有请求

我还尝试使用

（blur）=“onChangeYear（$event.value）”

，但它与组件不兼容

---

知道我能做什么吗？

明白了，不需要

（change）=“onChangeYear（$event.value）”

组件方面：

sliderValue = 0;

sliderEvent() {
    alert(this.sliderValue);
    // call your api for fetching data
    // this.sliderValue will be updated as it's
    // already 2 way binded
}

模板侧：

<ngx-slider
  [(ngModel)]="sliderValue"
  [step]="5"
  [filled]="true"
  [min]="10"
  [max]="200"
  (mouseup)="sliderEvent()">
</ngx-slider>

---

以下是工作演示的链接：

---

'ngx-slider'将仅为我们提供触发点“userChange”

---

更新后的年份值正确后是否要触发服务器调用？是。但当我在滑块上滑动并更改值时，更新后的年份值将更新。您希望在滑动事件后或滑动时获得值吗？我希望完成滑动。然后当鼠标移到上面并完成时，触发HTTP请求，我想这是绑定到一个反应表单上的？如果是，您可以监听表单上此字段的值更改，并在其上调用debounce，因此它将延迟调用。这与在文本字段上搜索时防止触发多个调用的方法大致相同。这太棒了！非常感谢。

<ngx-slider
  [(ngModel)]="sliderValue"
  [step]="5"
  [filled]="true"
  [min]="10"
  [max]="200"
  (mouseup)="sliderEvent()">
</ngx-slider>