JavaScript:setTimeout 不更新循环内的值

Question

我知道闭包，IIFE。
我已经阅读了其他答案(它们都指向使用 IIFE)。
那么为什么这不起作用？

• 我的图像应该逐渐淡入(2 秒内)
• 似乎只渲染了一次(有最终值)

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

这是代码:https://jsfiddle.net/warkentien2/Lh10phuv/1/

编辑:为 future 的读者
考虑从 i = 1; to 1 <= 100, i++ 过渡的所有答案
所以它不会在 99% 时停止渲染

Answer 1

一种快速但肮脏的方法是将 20 乘以 step。您一次创建所有超时，因此应该稍后执行的超时具有更高的延迟:

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