JavaScript settimeout use closure function to achieve timed printing numerical _javascript techniques

This time we use settimeout to implement an example of a chronological, sequential printing of numerical values. In fact, in the early days, but also I often make a mistake, or to achieve this ability, it seems that JS more far-fetched, in fact, is my fault, haha! Can not understand the strong place JS. Let's go straight to the subject!   Note that if you use setinterval to achieve, it must be very simple, this time we are using settimeout. Let's start with the simplest thought. That will write the following code.

for (var i = 0; i < 5; i++)
{ 
settimeout (Console.log (i), i*1000); 

This code, though printed sequentially, 0,1,2,3,4 the value of each I. However, the execution time did not work. Why? Because Console.log () is the execution of the method call, after calling this method, when it is executed immediately!, so did not achieve our intended purpose.

Let's keep looking at the following code.

Here we use an anonymous function that contains the printed console.log to print I, so I this value is shared, not until the first settimeout is executed, the For loop is done, the last i = 5, so I will print four times in fact we two solutions, Let's look first:

var j = 0; Function abc () {Console.log ("j =" +j); j + +; For  
(var i = 0; i < i++) { 

Here we have another global variable to store the value, each time the function abc,j is added once, so the ABC function is invoked at the time of execution to settimeout, so it will achieve the desired effect, but this j is a global variable,   Global variables can cause problems such as easily changing their values or naming conflicts. The second method is implemented, and we introduce the closure function again. Because of the closure function, each time a creation has its own space to store a unique value. So take advantage of this thinking. We write the code in the following code.

for (var i = 0; i < i++)
{ 
(function (x) {settimeout (function ()
{ 
console.log (x)},x*1000)}) 
   }  

We pass the value of the For loop for each time I perform to a different closure function, so that the value of I stored in each closure function will not be the same. So it's the result that we want to achieve.

PS: Simple encapsulation of settimeout using closures

When writing a JS script, you often use some spelling functions, such as calling SetTimeout

var msgalert= "test"; 
 function Testalert (msg) 
   { 
    alert (msg) 
   } 
    
   $ (document). Ready (function () { 
  $ ("#btnCancel"). Click (function (e) { 
    settimeout ("Testalert" ("+msgalert+"), 1000); 
     

Check for a long time, why can not play out the dialog box. Check for a long time to find that the original is less than a pair of single quotes

$ (document). Ready (function () { 
  $ (#btnCancel). Click (function (e) {settimeout (' 
    testalert (' +msgalert+ ') ", 1000); 
    }; 

This kind of writing error prone, not easy to check out the error, if the use of closures can be completely avoided, rewrite the following

 var msgalert= "test"; 
  function Dalayalert (msg, time) {  
  settimeout ( 
  testalert (msg), 
  time 
  ); 
  }  
 function Testalert (msg) 
 { 
  alert (msg) 
 } 
$ (document). Ready (function () {   
$ ("#btnCancel"). Click (function (e) { 
   Dalayalert (msgalert,1000) 
 

Because of the use of closures, but also a lot easier to check the error is also very easy