命令组合在 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 循环之外的代码也能正常工作？

编辑：顺便说一句，loop var "chg"没有问题，如果你在for中添加一个alert函数，你会看到元素是如何消失的。

Answer 1

哦，我喜欢这种问题:)

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

这解决了它：

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 变量，因为它不再共享，也不会被覆盖。

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