CODEWITHSUNDEEP
javascriptjqueryanimation
ZoEM
ZoEM

Reputation: 852

Replacing a setInterval timer in JS

I've got an animation with a specific speed which value is being passed from an input range. When the page loads the animation default speed is 16, as you can see below.

HTML:

 <input type="range" min="1" max="30"   /><br>

JS:

  animateInterval = setInterval(animate, 16);
    $("input").change(function(){
    var value = $(this).val();
   animateInterval = setInterval(animate,  value);
    })

Whenever I choose a new speed via the input range slider, the variable number with which I want the animation speed to run at, isn't replacing the default speed, it's actually adding to the default speed. So when the page loads and it runs at 16, and I decide to drag the slider to 10, the animation doesn't run at 10, it runs at 26! This doesn't allow me to slow down the animation, nor does it let me decide my own max speed as it can constantly be incremented.

How would I need to adjust the above code so that the speed clocks at whatever value is chosen, despite having the requirement for having a default speed when the page is loaded?

Upvotes: 0

Views: 1363

Answers (1)

kagelos
kagelos

Reputation: 423

Clear the previous interval before setting a new one:

clearInterval(animateInterval);

What you are doing now is setting yet another interval every time and all fire in parallel.

Upvotes: 4

Related Questions