Angular : changing setinterval timer via range slider

Question

l am using ionic 4 and angular . l want to use ionic range slider . The range slider lets users to change a range of values by moving the slider . l want to change the value of setInterval to reduce refresh or increase speed of refreshing .

My code

  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);
  }

The problem is , this.time in rangeChanged function is not getting update . When l changing the range slider the values setInterval are still same ! are not updating , in that case i have to stop setInterval then start again even he get new values . My point is how can make it live updating value for setInterval speed ?

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>

joyBlanks · Accepted Answer · 2019-09-07T19:37:13.930

1

The method setInterval is already invoked when you called method play() with this.time value at that time.

If you want to change any other value inside the callback method ie the first argument of setinterval you can hook it up with some getter methods, But if you want to change the interval you have to clear and call again

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);
}

edited Sep 07 '19 at 19:37

answered Sep 07 '19 at 19:07

joyBlanks

6,419
1
22
47

Thank you for answering . but still values of setinterval are not change – Ali Ghassan Sep 07 '19 at 19:15
which values dont change? – joyBlanks Sep 07 '19 at 19:17
interval of `setInterval` . – Ali Ghassan Sep 07 '19 at 19:18
did you call this `play(this.time)` – joyBlanks Sep 07 '19 at 19:19
it is changed only if stop `setInterval` then play again – Ali Ghassan Sep 07 '19 at 19:20
you mean that this.time in rangeChanged function is not getting updated? – joyBlanks Sep 07 '19 at 19:20
yes your right that what i mean this.time in rangeChanged function is not getting update – Ali Ghassan Sep 07 '19 at 19:21
than it is a different problem, not this one – joyBlanks Sep 07 '19 at 19:21
try putting an argument in rangechanged, you are passing $event so you can get the updated value from there, maybe the this.time is not updating right away – joyBlanks Sep 07 '19 at 19:23
see the updated code. if the `e.target.value` doesn't work try `e.target.data` – joyBlanks Sep 07 '19 at 19:25
error `ERROR TypeError: Cannot read property 'value' of undefined` – Ali Ghassan Sep 07 '19 at 19:28
when i use `console.log(e)` l got number values change – Ali Ghassan Sep 07 '19 at 19:34
did you find the time value? – joyBlanks Sep 07 '19 at 19:35
ya so plug it in play(e) – joyBlanks Sep 07 '19 at 19:36
okay now when l click on range slider line the value time is changing . but if i click on play button and change range slider the value time doesn't change – Ali Ghassan Sep 07 '19 at 19:38
can we go to discussion to chat? – Ali Ghassan Sep 07 '19 at 19:41

Angular : changing setinterval timer via range slider

1 Answers1