Looping css style with setTimeout: "in the blink of an eye"

Question

I want to make a bar (#innerBar) to decrease 1% in width per second.

The loop doesn't seem to work. My bar drops from 100% to 0% in the blink of an eye.

function timer(){

    var timer;

    for(i=100;i>=0;i--){

        timer = i.toString() + "%";

        setTimeout(function({$('#innerBar').css("width", timer)}, ((100-i)*1000));

    }
}

Note : #innerBar is a DIV with a css property (height:10px). ** + the width from timer(); **

Answer 1

As already said in the comments, you need to put it in the closure. Here's an example:

function timer() {
  for (i = 100; i >= 0; i--) {
    setTimeout(function(t) {
      return function() {
        var timer = t.toString() + "%";
        $('#innerBar').css("width", timer);
      };
    }(i), ((100 - i) * 1000));
  }
}

timer();

#innerBar {height: 50px; background: green; transition: width 0.2s linear}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="innerBar"></div>

---

EXPLANATION

So my question are: what is going throught function(t)? and why and how does }(i) work? Is it a multiplication of the fu?

Let's take the function body we're passing in to setTimeout:

function(t) {
  return function() {
    var timer = t.toString() + "%";
    $('#innerBar').css("width", timer);
  };
}(i)

Let's omit the inside part:

function(t) {
   // do some stuff with t
}(i)

Looks familiar? It's like the function body is called right away and is called an IIFE, just like, say:

(function(a, b) {
    return a + b;
})(2, 3)  // returns 5

So back to the original function, it accepts one parameter, t, and when we're calling the function we're passing in the iterator i as an argument (so the value of i becomes t inside the function). As I said in the comment, this is necessary in order to "fetch" the current value of i instead of getting the post-loop value.

Answer 2

I think the following code does what you want. the input time should be 1000, which will decrease you width by 1% every second

  var width = $('#innerBar').width();

  function timeLoop(time){
      width = width*0.99;
      $('#innerBar').css("width", width);
      if (width <= 0.01){
          return;
      }
      else {
          setTimeout(function() {
              timeLoop(time);
          }, time);
      }
  }

Answer 3

As @Shomz already posted. That is good solution. I simply want to add my solution because it does not create 100 functions. So it's slightly lighter on the memory. Also you don't have to look through the DOM for #innerBar over and over again. And I removed jQuery as a dependency.

var size = 100;
var bar = document.getElementById( "innerBar" );

function setSize() {
    bar.style.width = size-- + "%";
    if ( size > 0 ) setTimeout( setSize, 1000 );
}
    
setSize();

#innerBar {
    width: 100%;
    height: 50px; 
    background: green; 
    transition: width 0.2s linear;
}

<div id="innerBar"></div>