命令组合在 for 循环中不起作用

Question

人们，这真的非常非常奇怪，我为此感到疯狂。它似乎很好奇。

它是关于简单地获取一个元素，例如p或li，使其消失，更改其文本并重新出现。

它在 for 循环

之外完美运行，但在 for 循环中，它不起作用！，当您需要根据某些条件更改 x 个元素时，循环始终是要走的路。

我准备了一个评论小提琴：

http://jsfiddle.net/Reaversword/JYrQ8/

无论如何，我也将在这里编写代码：

.CSS

/*This doesn't matters for the question*/
.Disc
{
    list-style-type:circle;
list-style-type:disc;
list-style-position:outside;
}
#clk
{
    color:blue;
    background:red;
    width:60px;
    height:20px;
}

JAVASCRIPT

//Document Ready function
$(document).ready (function (){createAll();});
//Function that creates a Div for click, and some Unordered List elements
function createAll()
{
    var clk=document.createElement("div");
    clk.id="clk";
    clk.onclick=function(){Disreappear();};
    clk.innerHTML = "ClickMe!";
    $(document.body).append(clk);
    var Father=document.createElement("div");
    $(document.body).append(Father);
    var MainList=document.createElement("li");
    MainList.id="idMainList";
    MainList.innerHTML="<a href='#home' style='text-decoration:none;'>MainList</a>";
    Father.appendChild(MainList);
    //Now another nested one:
    var NewNested=document.createElement("ul");
    Father.appendChild(NewNested);
        //And now, Nested Lis
        var NN1=document.createElement("li");
        NN1.id="idNN1";
        NN1.className="Disc";
        NN1.innerHTML="<a href='http:www.google.com' style='text-decoration:none;'>GoogleCom</a>";
        NewNested.appendChild(NN1);
        var NN2=document.createElement("li");
        NN2.id="idNN2";
        NN2.className="Disc";
        NN2.innerHTML="<a href='http:www.google.es' style='text-decoration:none;'>GoogleEs</a>";
        NewNested.appendChild(NN2);
        var NN3=document.createElement("li");
        NN3.id="idNN3";
        NN3.className="Disc";
        NN3.innerHTML="<a href='http:www.google.it' style='text-decoration:none;'>GoogleIt</a>";
        NewNested.appendChild(NN3);
        var NN4=document.createElement("li");
        NN4.id="idNN4";
        NN4.className="Disc";
        NN4.innerHTML="<a href='http:www.google.de' style='text-decoration:none;'>GoogleDe</a>";
        NewNested.appendChild(NN4);
        var NN5=document.createElement("li");
        NN5.id="idNN5";
        NN5.className="Disc";
        NN5.innerHTML="<a href='http:www.google.fr' style='text-decoration:none;'>GoogleFr</a>";
        NewNested.appendChild(NN5);
}
//Function that dispatches when we click on the div (ClickMe!). There is something I can't understand:
function Disreappear()
{
    //This makes the "MainList" dissapears in 0.2 seconds
    $("#idMainList").css({"opacity":"0.0", "transition":"0.2s", "-webkit-transition":"0.2s"});
    //This changes "MainList" text (nodeValue) after 0.2 secs
    setTimeout(function(){$("#idMainList").text("Hello")}, 200);
    //This makes the "MainList" reappears in 0.2 seconds after 0.2 seconds, (so, after text has changed).
    setTimeout(function(){$("#idMainList").css({"opacity":"1.0", "transition":"0.2s", "-webkit-transition":"0.2s"})}, 200);
    //OK. Now the same, but for 5 elements inside a for loop:
    for (var chg=0; chg<5; chg++)
    {
        //Dissapears
        $("#idNN"+String(chg+1)).css({"opacity":"0.0", "transition":"0.2s", "-webkit-transition":"0.2s"});
        //Text (nodeValue) change
        setTimeout(function(){$("#idNN"+String(chg+1)).text("Hello")}, 200);
        //Reappears (doesn't works and no idea of why!)
        setTimeout(function(){$("#idNN"+String(chg+1)).css({"opacity":"1.0", "transition":"0.2s", "-webkit-transition":"0.2s"})}, 200);
    }
}

我用jQuery animate或jQuery delay进行了测试。没有办法让它工作！有什么想法吗？为什么 for 中的最后一个命令不起作用，即使 for 循环之外的代码也能完美运行？

编辑：顺便说一下，循环变量"chg"没有问题，如果你在for中添加一个警报函数，你会看到元素是如何一个接一个地消失的。

Answer 1

哦，我喜欢这种问题:)

发生这种情况是因为 chg 变量迅速增加到 6，然后执行 setTimeout，并且此变量的值已过时。

这可以修复它：

for (var chg=0; chg<5; chg++)
{
    (function(chg){
        //Dissapears
        $("#idNN"+String(chg+1)).css({"opacity":"0.0", "transition":"0.2s", "-webkit-transition":"0.2s"});
        //Text (nodeValue) change
        setTimeout(function(){$("#idNN"+String(chg+1)).text("Hello")}, 200);
        //Reappears (doesn't works and no idea of why!)
        setTimeout(function(){$("#idNN"+String(chg+1)).css({"opacity":"1.0", "transition":"0.2s", "-webkit-transition":"0.2s"})}, 200);
    })(chg);                
}

JSFIDDLE： http://jsfiddle.net/edgarinvillegas/JYrQ8/1/

我们引入了一个闭包，因此内部函数中的chg保持原始值。

编辑为了更好地理解解决方案，您可以以不同的方式命名内部和外部chg：

for (var i=0; i<5; i++)
{
    (function(chg){
        //Dissapears
        $("#idNN"+String(chg+1)).css(...
    })(i);                
}

诀窍是循环的每一步都会"创建"一个不同的chg变量，因为它不再共享，也不会被覆盖。

干杯，来自玻利维亚拉巴斯