javascript - 我想为以下 js 代码创建一个 for 循环。请帮我

Question

function fade90() { document.getElementById("myDiv").style.opacity="0.90"; setTimeout("fade80()", 100); }
function fade80() { document.getElementById("myDiv").style.opacity="0.80"; setTimeout("fade70()", 100); }
function fade70() { document.getElementById("myDiv").style.opacity="0.70"; setTimeout("fade60()", 100); }
function fade60() { document.getElementById("myDiv").style.opacity="0.60"; setTimeout("fade50()", 100); }
function fade50() { document.getElementById("myDiv").style.opacity="0.50"; setTimeout("fade40()", 100); }
function fade40() { document.getElementById("myDiv").style.opacity="0.40"; setTimeout("fade30()", 100); }
function fade30() { document.getElementById("myDiv").style.opacity="0.30"; setTimeout("fade20()", 100); }
function fade20() { document.getElementById("myDiv").style.opacity="0.20"; setTimeout("fade10()", 100); }
function fade10() { document.getElementById("myDiv").style.opacity="0.10"; setTimeout("hide()", 100); }

我写这个。这个对吗？如果没有，请解决此问题。

function cls_msg(){
for (i=1;i<10;i++)
{
setTimeout(document.getElementById("myDiv").style.opacity=100-(i*10), 100);
}

谢谢

Answer 1

你可能想要这个：

var elem = document.getElementById("myDiv");
for (i=1;i<10;i++) {
   (function(i){
      setTimeout(
        function(){elem.style.opacity=100-(i*10)},
        (i+1)*100
      );
   })(i);
}

与您的代码的差异：

• 超时是不同的，因此它们不会同时被调用（代码不会暂停，直到执行下一个超时）
• i受闭包保护，因此在触发超时时它没有循环结束的值
• 传递给的第一个参数setTimeout是一个函数
• 正如 yabol 所建议的那样，元素被缓存