Here is the code on jsfiddle
<script>
function updateSync1() {
for (var i = 0; i < 1000; i++) {
document.getElementById('output').innerHTML = i;
}
}
function updateSync2() {
for (var i = 0; i < 1000; i++) {
setTimeout(document.getElementById('output').innerHTML = i, 0);
}
}
function updateAsync() {
var i = 0;
function updateLater() {
document.getElementById('output').innerHTML = (i++);
if (i < 1000) {
setTimeout(updateLater, 0);
}
}
updateLater();
}
</script>
<div class="row btn_area">
<button class="btn btn-info" onclick="updateSync1()">Run Sync 1</button>
<button class="btn btn-info" onclick="updateSync2()">Run Sync 2</button>
<button class="btn btn-info" onclick="updateAsync()">Run Async</button>
<span class="label label-info pull-right" style="display:block;" id="output"></span>
</div>
http://jsfiddle.net/himaneasy/y1534ths/
when I click 'Run Sync 1' the code will run to 999 directly.
When I click 'Run Sync 2',the code will run to 999 directly.
When I click 'Run Async',the page will render one by one.
Can anyone help explain the difference between Run Sync1 & Run Sync2? Why setTimeout in Run Sync 2 does not make it render one by one?