js closure - about binding events in a for loop to print variable i is the last time.

Closure is a function with access to another function scope variables to create a common way of closure, it is to create an internal function to another function, local variables of this function by another function.

When the for loop inside the anonymous function executes the statement return i, i did not because the anonymous function inside this variable, so the parent function from him i find i, and i is the parent function in a for loop, when found this i when i finished a for loop, which is 5, so get five 5.
Look at the title:

 for (var i = 0; i < 5; i++) {
 	setTimeout(function() { 
		 console.log(new Date, i); 
 	}, 1000); 
 } 
 console.log(new Date, i);

The results:
Sun May 05 2019 21:34:14 GMT + 0800 (China Standard Time) 5

Sun May 05 2019 21:34:15 GMT + 0800 ( China Standard Time) 5
Sun May 05 2019 21:34:15 GMT + 0800 ( China Standard Time) 5
Sun May 05 2019 21:34:15 GMT + 0800 ( China standard time) 5
Sun May 05 2019 21:34:15 GMT + 0800 (China standard time) 5
Sun May 05 2019 21:34:15 GMT + 0800 (China standard time) 5
actually referenced in this function is inside of i the last time the value of i, 0,1,2,3,4 ... why is not it? Because when you are a for loop, you did not perform this function, the function you are passing second only executed when performing this function, it finds itself without this variable i, then to its scope chain i find this variable, because this time has been finished for loop, so the value stored in the scope chain inside i is 10, and finally print out the 10.
1. Save function with external variables

var j=0;
for (var i = 0; i < 5; i++) {  
	setTimeout(function() { 
		console.log(new Date, j++); 
	}, 1000);
} 
console.log(new Date, j);

The results:
Sun May 05 2019 21:34:14 GMT + 0800 (China Standard Time) 0

External function references a variable that variable is referenced last values.

2. Self-adjusting
method:

for (var i = 0; i < 5; i++) { 
	function a(i){ 
		setTimeout(function() { 
			console.log(new Date, i); 
		}, 1000);
	}; 
	a(i);
}
console.log(new Date, i)

The results:
Sun May 05 2019 21:34:13 GMT + 0800 (China Standard Time) 5

Sun May 05 2019 21:34:14 GMT + 0800 ( China Standard Time) 0
Sun May 05 2019 21:34:14 GMT + 0800 ( China Standard Time) 1
Sun May 05 2019 21:34:14 GMT + 0800 ( China standard time) 2
Sun 05 May 2019 21:34:14 GMT + 0800 (China standard time) 3
Sun 05 May 2019 21:34:14 GMT + 0800 (China standard time) 4

Why can it? Because you are in the loop variable i when the function has been executed, the natural variable i is what you print out anything.
Method Two:

// 外面有函数包着就要调一下
for (var i = 0; i < 5; i++) { (function(j) {  
	setTimeout(function(j) { 
		console.log(new Date, j);
	 }, 1000); i})(i); 
}
 console.log(new Date, i);
 //也可以这样写
 for (var i = 0; i < 5; i++) { (function(j) {  
	setTimeout(function() { 
		console.log(new Date, j);
	 }, 1000); })(i); 
}
 console.log(new Date, i);

The results:
Sun May 05 2019 21:34:14 GMT + 0800 (China Standard Time) 5

Sun May 05 2019 21:34:15 GMT + 0800 ( China Standard Time) 0
Sun May 05 2019 21:34:15 GMT + 0800 ( China Standard Time) 1
Sun May 05 2019 21:34:15 GMT + 0800 ( China standard time) 2
Sun 05 May 2019 21:34:15 GMT + 0800 (China standard time) 3
Sun 05 May 2019 21:34:15 GMT + 0800 (China standard time) 4
Principle is through self-executing function, and the variable i is saved to this parameter self-executing function.
JS using basic types of parameters are passed by value transfer characteristic

//定时器不需要调，直接传参就可以了
 for (var i = 0; i < 5; i++) {
 	setTimeout(function(i) { 
 		console.log(new Date, i);
 	}, 1000,i);
 } 
 console.log(new Date, i);

To a considerable Code can be written:

var output = function (i) {
 	setTimeout(function() {
  		console.log(new Date, i); 
  	}, 1000);
 }; 
 for (var i = 0; i < 5; i++) { 
 	 output(i); // 这里传过去的 i 值被复制了
  } 
  console.log(new Date, i);

js closure - about binding events in a for loop to print variable i is the last time.

Guess you like