Angular : 通过范围滑块更改 setinterval 计时器

Question

我正在使用 ionic 4 和 angular。我想用 ionic range slider 。范围滑块让用户可以通过移动滑块来更改值的范围。 l 想改变setInterval的值来减少刷新或提高刷新速度。

我的代码

  time : 600 ;
  speed = 300;
  private interval;

rangeChanged(){
    this.speed = 300 * this.time;

    console.log(this.time)
  }


  play() {

    this.interval = setInterval(() => {

   // i deleted my code here 

    }, this.time);
  }

问题是，rangeChanged 函数中的 this.time 没有得到更新 .当我更改范围滑块时，值 setInterval 仍然相同！没有更新，在那种情况下我必须停止 setInterval 然后重新开始，即使他获得新值。我的观点是如何让它以 setInterval 速度实时更新值？

html

<ion-range min="300" max="600" [(ngModel)]="time" color="secondary"
   (ngModelChange)="rangeChanged($event)" step="10" debounce="500">
    <ion-label range-left>3</ion-label>
    <ion-label range-right>10</ion-label>
  </ion-range>

Answer 1

当您当时使用 this.time 值调用方法 play() 时，方法 setInterval 已经被调用。

如果您想更改回调方法中的任何其他值，即 setinterval 的第一个参数，您可以将其与一些 getter 方法挂钩，但是如果您想更改间隔，则必须清除并再打电话

rangeChanged(e){
  this.speed = 300 * e;

  console.log(e.target.value)
  play(e)
}

play(time) {
  if(this.interval) {
    clearInterval(this.interval)
  }

  this.interval = setInterval(() => {
    const r = getAnotherValue(); // will work
  }, time);
}

Angular : 通过范围滑块更改 setinterval 计时器

Angular : changing setinterval timer via range slider

setinterval

ion-range-slider

angular

ionic4