1

我正在使用 ionic 4 和 angular 。我想使用离子范围滑块。范围滑块允许用户通过移动滑块来更改值的范围。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);
  }

问题是， this.time功能rangeChanged没有得到更新。当我更改范围滑块时，值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>
4

1 回答 1

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);
}
于 2019-09-07T19:07:54.983 回答