StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I'm guessing some background is needed to understand this question.</p> <p>Each time you add a new row to the table in your webpage, your script will alter the model of your document in your browsers memory. The API you are using for this is called DOM (Document Object Model).</p> <p>An individual update to DOM doesn't always necessarily mean that a page will be redrawn. It is up to the browser to decide, when a given set of DOM alterations will cause the browser to re-render the page.</p> <p>I don't know for fact, but I'm guessing that browsers typically update views perhaps somewhere around 40-60 times per second. The thing is this: if your table printing takes less time than 1/60th of a second, you don't get to see the partial updates.</p> <p>By adding a timer you of course can slow down the progress of creating the table. As you perceived, this will allow you to see the page redrawn at different points during the for loop.</p> <p>If you wish to force browser to redraw the UI, there are some JavaScript hacks you could try applying. One such hack for instance is documented in <a href="http://ajaxian.com/archives/forcing-a-ui-redraw-from-javascript" rel="nofollow">Ajaxian: Forcing a UI redraw from JavaScript</a>.</p> <p><strong>If you deliberatively wish to run your program slowly</strong> and add rows slowly, say one row per second, while potentially doing some other stuff with JavaScript at the same time, you need to run the loop either <em>by triggering new iterations somehow or by using another (JavaScript) thread</em>.</p> <p>A schematic example of using <code>setTimeout</code> to slow down printing (prints out 1 row per sec, just tweak second parameter in <code>window.setTimeout</code> to change delay):</p> <pre><code>var table = $('<table id="table1"/>').appendTo($('div')); var i = 0; var counter = 1000; function addRow() { table.append('<tr><td>'+i+'-1</td><td>'+i+'-2</td><td>'+i+'-3</td></tr>'); i++; if(i<counter) { window.setTimeout( addRow, 1000 ); } } addRow(); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload