angular - 在 Angular 中几秒钟后触发(更改) slider

Question

使用 ngx-ui一年范围的 slider 。这是 HTML 部分:

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

这是我的带有 onChangeYear() 函数的组件:

onChangeYear(value) {
  this.globalYearSelection = value;
  this.getAllChartsData();
}

如您所见，当我更改 slider 的值时，我更新了 this.globalYearSelection，然后我调用了一个具有多个 HTTP 请求的函数来获取一些数据。

但是，当我更改 slider 的值时，this.getAllChartsData() 会针对 slider 的每一步调用多次。

我试着这样做:

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

为了确保它只会在 2 秒后触发 HTTP 请求，但结果是等待 2 秒然后触发所有我一次滑动的所有值的请求。

我也尝试过使用 (blur)="onChangeYear($event.value)" 但它与组件不兼容。

知道我能做什么吗？

Answer 1

你可以使用这个事件

userChangeEnd

将执行您想要的相同行为。

正确标记的解决方案有问题:

在(mouseup)事件中，如果你拉动 slider 并将鼠标从 slider 上移开， slider 值会改变，但不会触发该事件