Kendo UI Angular 2 - 去抖滑块

Question

我想在触发滑块更改事件时更新模型 + 去抖动时间（为了不给布局带来太多压力，因为该模型将用于每 250 毫秒刷新一次的大量图表） .

场景是这样的：

HTML

    <kendo-slider [min]="1" 
                  [max]="5" 
                  [(ngModel)]="model" 
                  (valueChange)="functionToBeDebounced($event)">
    </kendo-slider>

TS

 public functionToBeDebounced(value) {
        this.model = value;
        this.notification.emit(this.model);
 }

是否可以这样做？

    <kendo-slider [min]="1" 
                  [max]="5" 
                  [(ngModel)]="model" 
                  (valueChange)="functionToBeDebounced($event)"
                  [debounce]="500" >
    </kendo-slider>

只有滑动结束才会调用functionToBeDebounced

Answer 1

您可以使用 rxjs/Subject 去抖动您想要的一切。

import { Subject } from 'rxjs/Subject';

private debouncer: Subject<any> = new Subject();

ngOnInit(){
  this.debouncer.debounceTime(500).subscribe(event => {
    this.functionToBeDebounced(event);
  });
}

private callDebouncer(event){
  this.debouncer.next(event);
}

(valueChange)="callDebouncer($event)"

Kendo UI Angular 2 - 去抖滑块

KendoUI Angular2 - Debounce slider

telerik

kendo-slider

kendo-ui-angular2

angular