Discussion on javascript closure parameter passing and event loop binding examples_javascript skills

Today I saw a javascript question that bound events in a loop according to common sense, but the result was not what I wanted.

Copy code The code is as follows:

text


link
<script> <BR>var as = document.getElementsByTagName('a'); <BR>for ( var i = as.length; i--; ) { <BR>as[i].onclick = function() { <BR>alert(i); <BR>return false; <BR>} <BR>} <BR></script>

1. When clicking on the link in this code, the pop-up i’s are all -1. Why is this?

To put it simply, it is a function variable scope problem. If function() { alert(i); return false; } is regarded as a function a(); the variable i is not defined internally in a(), but it is used internally. , so I searched outside and found the i defined in the for loop. The click event started to be executed after the for loop was completed. After the execution, the value of i has become -1; so every time it pops up, it is -1;

2. The for loop with 2 parameters is also not common! Confuse?

　for (statement 1, statement 2, statement 3) {

　 //todo

　}

a.for loop condition

Generally speaking, statement 1, statement 2, and statement 3 are all optional.

b. Statement 2:

Usually statement 2 is used to evaluate the conditions of the initial variables.

Statement 2 is also optional.

If statement 2 returns true, the loop will start again, if it returns false, the loop will end.

Tip: If you omit statement 2, you must provide a break inside the loop. Otherwise the cycle cannot be stopped. This may crash the browser.

c. Regarding i--judgment:

When judging i--true/false, i is first judged and then i-- is calculated. When entering the last judgment of i--, when i==0 was actually judged, i-- was executed again after the judgment, and the for loop terminated, so the value of i became -1;

　var i = 1;

　!!i--;//ture

Solution:

Copy code The code is as follows:

var as = document.getElementsByTagName('a');
for ( var i = as.length; i--; ) {
(function (i){
as[i].onclick = function() {
alert(i);
return false;
}
})(i)
}

Or:

Copy code The code is as follows:

var as = document.getElementsByTagName('a');
for ( var i = as.length; i--; ) {
var a = function(i){
as[i].onclick = function( ) {
alert(i);
return false;
}
}
a(i);
}

Other netizens solved it in 7 Method demo:

Copy code The code is as follows:

< ;head>


> ;

Product One

Product Two

Product three

Product four

Product five

1. Save the variable i on each paragraph object (p)

Copy code The code is as follows:

function init() {
var pAry = document.getElementsByTagName("p");
for( var i=0; ipAry[i].i = i;
pAry[i].onclick = function() {
alert(this.i);
}
}
}

2. Save the variable i in the anonymous function itself

Copy code The code is as follows:

function init2() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i(pAry [i].onclick = function() {
alert(arguments.callee.i);
}).i = i;
}
}

3 , add a layer of closure, and i is passed to the inner function in the form of function parameters

Copy code The code is as follows:

function init3() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i(function( arg){
pAry[i].onclick = function() {
alert(arg);
};
})(i);//Parameters when calling
}
}

4. Add a layer of closure and pass i to the memory function in the form of a local variable

Copy code The code is as follows:

function init4() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i(function () {
var temp = i; //Local variable when called
pAry[i].onclick = function() {
alert(temp);
}
})();
}
}

5. Add a layer of closure and return a function as a response event (note the subtle difference with 3)

Copy code The code is as follows:

function init5() {
var pAry = document .getElementsByTagName("p");
for( var i=0; ipAry[i].onclick = function(arg) {
return function() { //Return a function
alert(arg);
}
}(i);
}
}

6. Use Function to implement, actually Each time a function instance is generated, a closure will be generated

Copy code The code is as follows:

function init6() {
var pAry = document.getElementsByTagName("p");
for( var i=0; ipAry[i].onclick = new Function ("alert(" i ");");//new generates a function instance at a time
}
}

7. Use Function to implement, pay attention to the difference from 6

Copy code The code is as follows:

function init7() {
var pAry = document. getElementsByTagName("p");
for( var i=0; ipAry[i].onclick = Function('alert(' i ')')
}
}

The summary is complete, welcome to participate!