Question

所以，我有一个代码，为用户提供一个gui来设置for循环。我想要的是当用户运行循环时...... div灰暗了循环运行并显示其当前索引循环结束，div返回

我无法弄清楚如何按报告顺序完成这些事情。似乎代码运行得太快而无法启动效果。我尝试过回调和队列。

有什么建议吗？

更新：我陷入困境并使用了setTimeout。有什么理由不起作用吗？

                setTimeout(function(){                                                                                                                                  //  \
                    $('div[id="'+loopid+'"]').children('.forloopcontent').children('.main_item').each( function(){                                                          //  \
                        if ($(this).attr("type")=="3")                                                                                                                      //  \
                        { id=$(this).children('.subequationblock').attr("id");   window[id].Solve_Equation(window[id].Format_name+"="+window[id].Format_equation);  }       //  \
                        if ($(this).attr("type")=="6")  { newloopid=$(this).children('.forloop').attr("id");    PrepLoopEquations(newloopid, UpdateForLoops(newloopid));}   //  \
                        if ($(this).attr("type")=="7")  { newloopid=$(this).children('.whileloop').attr("id");  PrepLoopEquations(newloopid, UpdateWhileLoop(newloopid));}  //  \
                        if ($(this).attr("type")=="8")  { UpdateIfElse($(this).children('.ifelse').attr("id"));}                                                                //  \
                    });                                                                                                                                                         //  \ 
                }, 1000);

Answer 1

好吧，我不确定我是否理解你需要做什么，但是我已经准备好了创建一个简单循环的演示，导致结果显示的时间延迟，当它完成时，div返回到这是原始状态：

CSS：

#mainDiv {width:400px; height:300px; background-color:white; border:1px solid blue; text-align:center; padding:20px 0;}

HTML：

<div id="mainDiv">
    <p id="mainP">Here go the main div contents</p>
</div>
<button id="mainButton">Click Me!</button>

JS：

$(document).ready(function() {
    window.prevText = $("#mainP").text(); //create a global variable with the existing contents of the div
    $("#mainButton").click(function(){ //when we click the button,
        $("#mainDiv").empty(); //empty any existing contents of the div
        $("#mainDiv").css("background-color", "lightgrey"); //change the div's background color

        //now we create a basic loop
        for (var i = 0, limit = 10; i < limit; i++){ //count from 1 to 10
            setTimeout(function() { //induce a time delay
                i=i-1; // count down from 10 to 1
                $("#mainDiv").append( "<br />Step: " + i ); //display each row of the count-down
                if (i==0){ //when we reach 0,
                    jobDone(); //execute this function
                }    
            }, 500 * i ); //time delay 500 mS (0.5 sec)
        }
    });
    function jobDone() { //when countdown is done,
        alert("Done"); //alert
        $("#mainDiv").css("background-color", "white"); //restore the original background color
        $("#mainDiv").text(""); //empty contents of div
        $("#mainDiv").html("<p>"+prevText+"</p>"); //restore the initial content of the div
    }
});

此处的实例：http://jsfiddle.net/dEcxr/2/

希望这是你需要的，或者至少尽可能接近你的问题。

我还添加了详细的注释，解释了js代码中的每一步，以便您可以看到它是如何工作的，并应用任何必要的修改。

如果我能以任何其他方式提供帮助，请告诉我。

西奥。

jquery格式化div，在报告结果时运行代码，取消格式化

1 个答案: