Question

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

我的形象应逐渐淡入（2s内）
似乎只渲染一次（带有最终值）

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/

编辑：面向未来的读者考虑从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);
}

Answer 2

这是另一个解决方案，一个接一个地应用淡入淡出：

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

fade(0);

JavaScript：setTimeout不更新循环内的值

2 个答案: