javascript

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

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!