0
var i = 0
function fill(){
    setInterval(animation,30)  // the problem starts here.
    function animation(){
        if (i<100){
            i++
            load.style.width = i+'%'
        } else {
            i = 0
        }
    }
    clearInterval(animation,30) // this should stop the interval above, but it is accelerating. Anyone nows how to solve it?
}
fill()
setInterval(fill,3000)
VLAZ
  • 26,331
  • 9
  • 49
  • 67
Myck Ribeiro Otoni
  • 5
  • 1
  • 1
    Does this answer your question? [Stop setInterval call in JavaScript](https://stackoverflow.com/questions/109086/stop-setinterval-call-in-javascript) – Ivar May 28 '20 at 21:29
  • 1
    clearInterval takes a number, not a callback. as written, you start a new interval every 3 seconds. – dandavis May 28 '20 at 21:29
  • 2
    I'm not really sure what you're trying to do here, to be honest. Yes, `clearInterval` takes an interval ID; but have it been implemented correctly, the whole `fill` function becomes meaningless. – raina77ow May 28 '20 at 21:30
  • 1
    The argument to `clearInterval()` needs to be the value returned by `setInterval()`, not the function. – Barmar May 28 '20 at 21:30
  • You probably want the `clearInterval()` call in the `else` block, not outside the `animation` function. – Barmar May 28 '20 at 21:31
  • I tried to put the setInterval(animation,30) inside a var, but when I do it, it doesn't execute. I'm a begginer at Javasctipt, I don't know how to write the code to execute it this way. – Myck Ribeiro Otoni May 28 '20 at 21:32
  • Oh, I got what I was doing wrong. When I tried to put the 'setInterval' inside a var, it worked. But I was putting the clearInterval OUTSIDE the 'else'. So it worked, but just the bar moved just ONE time, and I thought it was not working. Thank you so much. – Myck Ribeiro Otoni May 28 '20 at 21:54

1 Answers1

0

It's accelerating because you don't correctly stop the previous interval. So every time you call fill() it adds another interval function that's updating the progress bar.

You need to save the result of setInterval in a variable, and use that in the clearInterval call.

You should call clearInterval when you reach the 100% limit, not immediately after calling setInterval.

var i = 0

function fill() {
  var interval = setInterval(animation, 30) // the problem starts here.
  function animation() {
    if (i < 100) {
      i++
      load.style.width = i + '%'
    } else {
      i = 0
      clearInterval(interval)
    }
  }
}
fill()
setInterval(fill, 3000)
#load {
  background-color: blue;
  height: 30px;
}
<div id="load"></div>
Barmar
  • 741,623
  • 53
  • 500
  • 612
  • This solved my problem! Thank you so much. Now I have to study it so I can fully understand what was I doing wrong. Thank you all for helping me out! – Myck Ribeiro Otoni May 28 '20 at 21:44
  • Oh, I got what I was doing wrong. When I tried to put the 'setInterval' inside a var, it worked. But I was putting the clearInterval OUTSIDE the 'else'. So it worked, but just the bar moved just ONE time, and I thought it was not working. Thank you so much. – Myck Ribeiro Otoni May 28 '20 at 21:53