It is well known fact that JavaScript by nature is single-threaded which says that only one part of JavaScript code executes at a time. And interesting thing about timers is, they gets executed irrespective of other threads that are already in queue and also never interrupts another currently-running timer.
It is important for a complex JavaScript application not to become unresponsive to the user causing the browser to hang and eventually suspend all the updates of the page to be rendered while JavaScript is executing. It is therefore a fact that the complex operations should be managed in portions rather than a bulk.
Since JavaScript timers has the capability to suspend execution of a piece of code until a later time, this prevents the browsers from hanging. By considering this point, what we can do is to convert the bulk of code into loops and operate without blocking operations. Let’s consider an example to explain this:
<table>
<tbody></tbody>
</table>
<script>
var table = document.getElementsByTagName("tbody")[0];
for ( var i = 0; i < 2000; i++ ) {
var tr = document.createElement("tr");
for ( var t = 0; t < 6; t++ ) {
var td = document.createElement("td");
td.appendChild( document.createTextNode("" + t) );
tr.appendChild( td );
}
table.appendChild( tr );
}
</script>
In the above example,we are creating large amount of DOM nodes for populating a table with numbers. This is a expensive execution and will definitely allows the browser to hang. Now if we introduce timers into this situation to achieve a different, and perhaps a better solution to the above problem can be achieved. Check this code:
<table>
<tbody></tbody>
</table>
<script>
var table = document.getElementsByTagName("tbody")[0];
var i =0, max = 1999;
setTimeout(function() {
for ( var step = i + 500; i < step; i++ ) {
var tr = document.createElement("tr");
for ( var t = 0; t < 6; t++ ) {
var td = document.createElement("td");
td.appendChild( document.createTextNode("" + t) );
tr.appendChild( td );
}
table.appendChild( tr );
}
if(i < max) {
setTimeout( arguments.callee, 0);
}
}, 0);
</script>
In the above modified example, what we have done is, we broke up our intense operation into smaller operations and each creates equal number of DOM nodes. Even if worst case is considered, operations will be further broken and increasing number of DOM nodes for each operation. It has to be noted that we don’t execute the above code in an infinite loop. Now the browser gets updated every once a while, not allowing the user to see these types of update that occur. But, it is important to remember that they occur.
In case of any doubt, please go through this video which explains how javascript timers work regarding setting setTimeout to 0.
Best Open Source Business Intelligence Software Helical Insight is Here
A Business Intelligence Framework
-By
Uma Maheswar
Helical IT Solution