Menu
I just developed a little code to create a 24x60 table. I want to print the id of each <td> on mouseover:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
table {
background-color:blue;
}
td {
width: 2px;
height: 2px;
background-color:red;
}
</style>
</head>
<body>
<table id="time-table"></table>
<script type="text/javascript">
var table = document.getElementById( "time-table" );
for ( var r = 0; r < 24; r++ ) {
var row = document.createElement( "tr" );
for ( var c = 0; c < 60; c++ ) {
var td = document.createElement( "td" );
td.id = "td-" + r + "-" + c;
td.onmouseover = function ( e ) {
console.log( this.id );
}
row.appendChild( td );
}
table.appendChild( row );
}
</script>
</body>
</html>
The code works, but now I'm concerned if it is optimized? Am I creating 1440 event handling functions in the nested loops? Or is the JavaScript interpreter smart enough to only create one function and assign it to 1440 <td> elements?
753
Since nested loops perform at the rate of the amount of data input there is squared (O(N²) in Big O notation), it is not the most efficient. However, we know its useful when it needs to be useful!
HOWEVER, the conclusion is CONSISTENT: The nested loop is much FASTER. When the iteration time is 100^5, the difference is significant: 321.49 vs 210.05. There is about 1.53-time gap between them.
Nested loops are useful when for each pass through the outer loop, you need to repeat some action on the data in the outer loop. For example, you read a file line by line and for each line you must count how many times the word “the” is found.
Time complexity of nested loops is equal to the number of times the innermost statement is executed.
No, JavaScript won't to any optimizations (well, maybe some implementations do, but you should not rely on that). You are really creating that many functions.
Better define the function once and reuse it:
var handler = function() {
console.log(this.id);
}
for ( var r = 0; r < 24; r++ ) {
var row = document.createElement( "tr" );
for ( var c = 0; c < 60; c++ ) {
var td = document.createElement( "td" );
td.id = "td-" + r + "-" + c;
td.onmouseover = handler;
row.appendChild( td );
}
table.appendChild( row );
}
Or consider to use event delegation, that is, binding the handler to an ancestor of the cells:
table.onmouseover = function(event) {
event = event || window.event;
var target = event.target || event.srcElement;
if(target.nodeName === 'TD') {
console.log(target.id);
}
};
This works, since events bubble up the DOM tree and might even better performance-wise in some browsers.
A good resource to learn about event handling are the articles at quirksmode.org.
139
a small change, to be on the safe side:
var myFunc = function (e) {
console.log( this.id );
};
var table = document.getElementById( "time-table" );
for ( var r = 0; r < 24; r++ ) {
var row = document.createElement( "tr" );
for ( var c = 0; c < 60; c++ ) {
var td = document.createElement( "td" );
td.id = "td-" + r + "-" + c;
td.onmouseover = myFunc;
row.appendChild( td );
}
table.appendChild( row );
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
