javascript solutions to common closure problems_javascript skills

<title></title> <div id="div" style=" border:1px solid #eee; background:#000;color:#fff;height:50px;width:300px"> </div>0<div id="div1" style=" border:1px solid #eee; background:#000;color:#fff;height:50px;width:300px"> </div>1<div id="div2" style=" border:1px solid #eee; background:#000;color:#fff;height:50px;width:300px"> </div>2<div id="div3" style=" border:1px solid #eee; background:#000;color:#fff;height:50px;width:300px"> </div>3<div id="div4" style=" border:1px solid #eee; background:#000;color:#fff;height:50px;width:300px"> </div>4<div id="div5" style=" border:1px solid #eee; background:#000;color:#fff;height:50px;width:300px"> </div>5<div id="div6" style=" border:1px solid #eee; background:#000;color:#fff;height:50px;width:300px"> </div>6<input type="button" value="click" onclick="init();">
[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute it

]

The above code is intended to be used every time Add an event to each div, that is, whenever the div is clicked, the corresponding serial number of the div will be displayed. But when we run the program, we will find that no matter which one we click, only 7 will be displayed. What is the reason for this? --This is the problem of closure
It turns out that in js, when defining a function within a function, closure appears. At this time, the variables in the outer function can be used in the inner function, even if the outer function ends. But when a loop occurs in the outer layer, if the loop variable is used in the inner layer function, the final value of this variable will be directly referenced.
Just like the above code demonstrates.
How to solve it.
You can use anonymous functions to solve this problem. Anonymous functions will brake execution. We can use this feature to create a scope and activate a variable to reference the outer loop variable.
As shown in the code:

<title> </title> <div id="div" style=" border:1px solid #eee; background:#000;color:#fff;height:50px;width:300px"> </div> <div id="div1" style=" border:1px solid #eee; background:#000;color:#fff;height:50px;width:300px">0</div> <div id="div2" style=" border:1px solid #eee; background:#000;color:#fff;height:50px;width:300px">1</div> <div id="div3" style=" border:1px solid #eee; background:#000;color:#fff;height:50px;width:300px">2</div> <div id="div4" style=" border:1px solid #eee; background:#000;color:#fff;height:50px;width:300px">3</div> <div id="div5" style=" border:1px solid #eee; background:#000;color:#fff;height:50px;width:300px">4</div> <div id="div6" style=" border:1px solid #eee; background:#000;color:#fff;height:50px;width:300px">5</div> <input type="button" value="click" onclick="init();">6
[Ctrl A Select all Note:

If you need to introduce external Js, you need to refresh to execute
]

Because it is in the inner function As long as a loop variable appears, it will have a final value, so we use an anonymous function to stimulate a scope. Before entering the inner loop, another variable obtains the value of the loop variable. This idea is the essence of dealing with closure problems.

The following example: There is no obvious for loop at this time, but according to the above ideas, the problem can be solved immediately <title> </title> <div id="div" style="height:200px;width:300px"> </div> <input type="button" value="click" onclick="addDiv();">

[Ctrl A Select all Note:
If you need to introduce external Js, you need to refresh to execute it
]

Resolved code: <title> </title> <div id="div" style="height:200px;width:300px"> </div> <script type="text/javascript"> <!-- function $(elem){ return document.getElementById(elem); } function tag(name,elem) { return (elem||document).getElementsByTagName(name); } function init() { var div=tag("div"); for(var i=0;i<div.length;i++) { div[i].onclick=function() { alert(i); } } } // --> </script> <script type="text/javascript"><!-- function $(elem){ return document.getElementById(elem); } function tag(name,elem) { return (elem||document).getElementsByTagName(name); } function init() { var div=tag("div"); for(var i=0;i<div.length;i++){ (function(){ var temp=i; div[temp].onclick=function() { alert(temp); } })() } } // --></script> <script type="text/javascript"><!-- function $(elem){ return document.getElementById(elem); } var id=0; function addDiv() { var text="testtestetsetstsetstst"; var div=$("div"); var divChild=document.createElement("div"); div.appendChild(divChild); divChild.id="div"+id; divChild.innerHTML=" <input type='text' id='row"+id+"'>"+text; divChild.onclick=function() { alert("row"+id); $("row"+id).value=text; } id++; } // --></script> <script type="text/javascript"><!-- function $(elem){ return document.getElementById(elem); } var id=0; function addDiv() { var text="testtestetsetstsetstst"; var div=$("div"); var divChild=document.createElement("div"); div.appendChild(divChild); divChild.id="div"+id; divChild.innerHTML=" <input type='text' style='color:#f00' id='row"+id+"'>"+text; (function(){ var d=id; divChild.onclick=function() { alert("row"+d); $("row"+d).value=text; } })() id++; } // --></script> <input type="button" value="click" onclick="addDiv();">
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

补充：看到有网友这样解决了问题：

<title> </title> <script type="text/javascript"><!-- function $(elem){ return document.getElementById(elem); } var id=0; function addDiv() { var text="testtestetsetstsetstst"; var div=$("div"); var divChild=document.createElement("div"); div.appendChild(divChild); divChild.id="div"+id; divChild.innerHTML=" <input type='text' style='color:#f00' id='row'"+id+">"+text; divChild.onclick=function(f){ return function(){ alert(f); } }(id) id++; } // --></script> <div id="div" style="background:#000;color:#fff;height:200px;width:300px"> </div> <input type="button" value="click" onclick="addDiv();">
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

我个人的理解是 在进入内层循环之前 把id赋值给f，f在作为内层循环的参数，其思想应该是一样的.