Update a page in the middle of a javascript loop

Question

I am generating a lot of content on a page via javascript and I am noticing that the page won't display anything at all until the javascript has finished running. If you run this simple page, you can see the numbers counting down in the console and then when the loop is done, finally the content loads on the page.

<html>
<head>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
</head>

<body>
    Hello

    <script>
        $(function(){
            for(var i=9999; i>0; i--){
                console.log(i)
                $('body').append('<p>' + i*i*i + '987987 Lorem ipsum dolor sit amet. </p>')
            }
        })
    </script>
</body>

</html>

Isn't there a way to a) display the static page content immediately and b) display each bit of generated text as soon as it is created? Am I right to guess that if there is a way it will slow down the loop a lot? Maybe I could have a compromise where it displays a screen-worth of content immediately and then loops quickly through the rest in the usual manner. I just don't want to have to sit for a few seconds to wait to see the content on the page when I know it has already been generated.

possible duplicate of [jQuery append in loop - DOM does not update until the end](http://stackoverflow.com/questions/19058858/jquery-append-in-loop-dom-does-not-update-until-the-end) — bruchowski, Oct 16 '14 at 04:27

TGH · Answer 1 · 2014-10-16T13:07:51.447

1

Try this

        for(var i=50; i>0; i--){
            myFunction(i);

        }

        function myFunction(i){
            setTimeout(function(){$('body').append('<p>' + i +'</p>');;},10)


        }

Added a fiddle http://jsfiddle.net/thelgevold/pzcnnfgL/

edited Oct 16 '14 at 13:07

answered Oct 16 '14 at 04:26

TGH

38,769
12
102
135

This won't work properly because `i` won't have the desired value when `setTimeout()` calls its callback. – jfriend00 Oct 16 '14 at 04:28
This just prints 0 in every paragraph. – Moss Oct 16 '14 at 04:48
becuase the for loop is faster than the timeout function – Naveen Singh raghuvanshi Oct 16 '14 at 04:49
Nope, still not right. If you put the `setTimeout()` inside of `myFunction()`, then it would work. You should test/experiment with this kind of code in jsFiddle to see for yourself before posting. – jfriend00 Oct 16 '14 at 04:54
Your fiddle doesn't work until you add the jQuery library and wrap the javascript in `$(function(){ })` and set the interval to something smaller. But I guess this is another way to do it, and with less lines of code than the answer I accepted. – Moss Oct 16 '14 at 05:24
Why is `val` listed as an argument to the timer callback? – jfriend00 Oct 16 '14 at 05:47

score 0 · Accepted Answer · edited Mar 28 '18 at 17:33

0

    $(function(){
        var i= 9999;
        var dothis = function()
        {
            console.log(i);
            $('body').append('<p>' + i*i*i + '987987 Lorem ipsum dolor sit amet. </p>')
            if(i == 0) { clearInterval(x); }
            i--;
        };
        var x = setInterval(dothis, 1);
   });

You can try this !

It is somewhat slower than the for loop but will work as you need.

edited Mar 28 '18 at 17:33

Qwerty

1,252
1
11
23

answered Oct 16 '14 at 04:39

Naveen Singh raghuvanshi

169
1
13

This is a nice clean solution. But I see now that all I needed was to cause the javascript to pause at least once. So for my actual page I will just run a short loop to fill the start of the page and then use setTimeout and run a longer loop. – Moss Oct 16 '14 at 04:59

Update a page in the middle of a javascript loop

2 Answers2