Javascript function closures .
What is function closure?
- Functions that are defined within a function can access variables in the function they are defined, even after this function has completed its task. This possibility is to be considered as a closure in the computer science literature.
-
To put it another way; a closure is created when a function
keeps a link to its parent's scope even after the parent has returned.
Example:
<script type="text/javascript"> var innerFunc; function parentFunc(){ var number = 2010; // This unnamed function is defined within the function parentFunc // and will have access to the variables in this function. innerFunc = function(){ return ++number; } } parentFunc(); // After the first run of the parentFunc function, the unnamed // function will have a reference in the global scope. document.write("Execute 1. time: "+innerFunc()+"<br>"); document.write("Execute 2. time: "+innerFunc()+"<br>"); document.write("Execute 3. time: "+innerFunc()+"<br>"); </script> - In web site development, one wishes at times animation. Closure is in practice often used to get such effects.
-
The following is an example of how to change the background color of a web-page using
the closure and setInterval() method, found in the Windows environment
Example:
<script type="text/javascript"> function animateColor() { document.body.innerHTML="<h1>The animation is started!</h1>"; // We first sets up initial values for the colors red, // green and blue that we want to change over time. var r=255, g=255, b=255; // setInterval() method will repeatedly perform a // function, given as first argument, but with a time // interval in milliseconds given as the second argument. var handle=window.setInterval( // first an unnamed function to do the repeating job. function () { var rStr = r.toString(16); if (rStr.length == 1) rStr = '0' + rStr; var gStr = g.toString(16); if (gStr.length == 1) gStr = '0' + gStr; var bStr = b.toString(16); if (bStr.length == 1) bStr = '0' + bStr; // background color is changed each time the function is performed document.body.style.backgroundColor="#"+rStr+gStr+bStr; r=r-1; g=g-1; // The animation stops when the red color is less than 0 if (r<0) { document.body.innerHTML="<h1>The animation is stopped!</h1>"; // The returns from the setInterval() method is used // to stop the repeating cycle using the clearInterval () // method, which is found in the Windows environment. window.clearInterval(handle); } // interval in milliseconds is 10. },10); // animateColor () function will end here but the internal // function will continue with it's duties. } </script> <!-- The animation starts when the page is loaded --> <body onload="animateColor()" ></body>
Next in menu
© 2010 by Finnesand Data.
All rights reserved.
This site aims to provide FREE programming training and technics.
Finnesand Data as site owner gives no warranty for the
correctness in the pages or source codes.
The risk of using this web-site pages or any program
codes from this website is entirely at the individual user.