A sample discussion of loop binding for javascript closure arguments and events

2020-03-30 02:41:07
OfStack

Today, I saw a javascript problem binding events in a normal loop, but the result was not what I wanted.

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

1. This code clicks on the link to bring up the I is -1, why is this?

Function () {alert(I); Return false; } as a function a(); A () the variable I is not defined internally, but it is used internally, so it looks outside and finds the I defined in the for loop. The click event is executed after the for loop is completed, and the value of I has become -1 after the execution; So every time it pops up it's going to be -1;

2. Two-parameter for loop is also not common! Confused?

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

/ / todo

}

A.f or loop conditions

Statements 1, 2, and 3 are usually optional.

B. Statement 2:

Statement 2 is typically used to evaluate the condition of the initial variable.

Statement 2 is also optional.

If statement 2 returns true, the loop starts again, and if statement 2 returns false, the loop ends.

Tip: if you omit statement 2, you must provide the break within the loop. Otherwise the cycle cannot stop. This can cause the browser to crash.

C. about I -- judgment:

When you say I --true /false, you say I before you do I. So the last time you say I -- when you say I ==0, you actually say I ==0, and then you say I -- again, the for loop ends, so the value of I becomes negative 1;

Var I = 1;

!!!!! I -; / / true

Solutions:

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

Or:

 
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); 
}

Solution demo in other netizens 7:

 
<html > 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> Closure demo </title> 
<script type="text/javascript"> 

function init() { 
var pAry = document.getElementsByTagName("p"); 
for( var i=0; i<pAry.length; i++ ) { 
pAry[i].onclick = function() { 
alert(i); 
} 
} 
} 
</script> 
</head> 
<body onload="init();"> 
<p> Products a </p> 
<p> The second product </p> 
<p> Three products </p> 
<p> Four products </p> 
<p> The product of five </p> 
</body> 
</html>

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

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

2. Save the variable I in the anonymous function itself

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

3, add a layer of closure, I in the form of function parameters passed to the inner function

 
function init3() { 
var pAry = document.getElementsByTagName("p"); 
for( var i=0; i<pAry.length; i++ ) { 
(function(arg){ 
pAry[i].onclick = function() { 
alert(arg); 
}; 
})(i);//Call-time parameter
} 
}

4. Add a layer of closure, and I is passed to the memory function as a local variable

 
function init4() { 
var pAry = document.getElementsByTagName("p"); 
for( var i=0; i<pAry.length; i++ ) { 
(function () { 
var temp = i;//Local variables when invoked
pAry[i].onclick = function() { 
alert(temp); 
} 
})(); 
} 
}

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

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

6, with the Function implementation, each Function instance will actually produce a closure

 
function init6() { 
var pAry = document.getElementsByTagName("p"); 
for( var i=0; i<pAry.length; i++ ) { 
pAry[i].onclick = new Function("alert(" + i + ");");//New generates one instance of the function at a time
} 
}

7, use Function to realize, notice the difference with 6

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

Summary completed, welcome to clap brick!