jquery Format div, run code while reporting results, unformat

Question

So, I have a code that presents a gui for the users to set up a for loop. What I want is that when the user runs the loop... the div greys out the loop runs and displays its current indexes the loop finishes and the div returns

I can't figure out how to accomplish these things in sequence with the reporting. It appears as if the code runs too fast for the effects to kick in. I have tried callbacks and queue.

Any suggestions?

UPDATE: I caved in and am using the setTimeout. Any reason why this wouldn't work?

                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);

If I knew what the proper technique was, I could make a better effort. Should I use a promise, callbacks, queue? — Joshua Foxworth, May 26 '14 at 21:51
http://stackoverflow.com/questions/951021/what-do-i-do-if-i-want-a-javascript-version-of-sleep something in one of those answers should help. Basically you will need to use settimeout to 'delay' the execution of the loop if you want to show it slowed down. — Steve, May 26 '14 at 21:52
Using the timeout did "work" for me. However, it just seemed like such a poor method that added a lot of time, that I was looking for a more clever method. — Joshua Foxworth, May 26 '14 at 21:55
Can someone explain why callbacks don't work? Is there such a delay in the formatting that the callbacks are invoked before they take effect? — Joshua Foxworth, May 26 '14 at 21:57
Hello Joshua, maybe my answer below would solve your problem or at least bring you closer to a solution... — Theo Orphanos, May 26 '14 at 23:55

score 0 · Answer 1 · answered May 26 '14 at 23:52

Well, I am not sure if I understood well what you need to do, but I have prepared this demonstration of creating a simple loop, inducing a time delay to the display of results and when it's done, the div returns back to it's original state:

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
    }
});

Live example here: http://jsfiddle.net/dEcxr/2/

Hope this is what you needed or at least to be as close to your question as possible.

I have also added detailed comments explaining every step in the js code, so that you can see how it works and apply any necessary modifications.

If I could help in any other way, pls let me know.

Theo.

jquery Format div, run code while reporting results, unformat

1 Answers1