JavaScript：setTimeout不会在循环内更新值

Question

I'm aware of closures, IIFE.
I've read the other answers (they all point to using IIFE).
So why is this not working?

• my image should gradually fade-in (in 2s)
• it seems like it's only rendering once (with final value)

var imgFade = document.getElementById('img-fade');
for(i = 0; i < 100; i++){
  (function(step) {
    setTimeout(function() {
      imgFade.style.opacity = (step/100);
    }, 20);
  })(i);
}

here's the code: https://jsfiddle.net/warkentien2/Lh10phuv/1/

EDIT: for future readers
consider all answers transitioning from i = 1; to 1 <= 100, i++ i = 1; to 1 <= 100, i++
so it won't stop rendering at 99%

Answer 1

A quick but dirty way is multiplying the 20 by step . You create all the timeouts at once, so the ones that are supposed to be executed later have higher delay:

var imgFade = document.getElementById('img-fade');
for(i = 0; i < 100; i++){
  (function(step) {
    setTimeout(function() {
      imgFade.style.opacity = (step/100);
    }, step * 20);
  })(i);
}

Answer 2

Heres another solution, applying the fade in one after another:

var fade = function(step){
  imgFade.style.opacity = (step/100);
  if(step < 100){
    setTimeout(function(){ fade(++step); }, 20);
  }
};

fade(0);