js für die Schleifenausgabe i ist das gleiche Wertproblem-js-Tutorial-php.cn

js für die Schleifenausgabe i ist das gleiche Wertproblem

高洛峰

Freigeben： 2017-03-01 16:11:36

Original

2120 Leute haben es durchsucht

1. Vor Kurzem ist bei der Entwicklung ein Problem aufgetreten. Anstatt auf jedes p zu klicken, werden die entsprechenden 1, 2, 3, 4, 5 angezeigt.

Der Code lautet wie folgt:

<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>闭包演示</title> 
</head>  
<body>  
<p>1</p>  
<p>2</p>  
<p>3</p>  
<p>4</p>  
<p>5</p> 
<script type="text/javascript">
window.onload=function() {  
 var ps = document.getElementsByTagName("p");  
 for( var i=0; i<ps.length; i++ ) {  
   ps[i].onclick = function() {  
   alert(i);  
 }  
 }  
}  
</script> 
</body>  
</html>

Nach dem Login kopieren

Klicken Sie zu diesem Zeitpunkt auf ein beliebiges p und das Popup wird 5 angezeigt

Grund: js-Ereignisprozessor wird währenddessen nicht ausgeführt die Leerlaufzeit des Threads, die zum letzten Lauf führt. Wenn die Ausgabe der letzte Wert von i ist, also: 5

2. Lösung: Verwenden Sie einen Abschluss, um den Wert der Variablen i zu schützen .

//sava1:加一层闭包，i以函数参数形式传递给内层函数 
 for( var i=0; i<ps.length; i++ ) {  
 (function(arg){   
  ps[i].onclick = function() {   
   alert(arg);  
  };  
 })(i);//调用时参数  
 } 


//save2:加一层闭包，i以局部变量形式传递给内存函数 
 for( var i=0; i<ps.length; i++ ) {  
 (function () {  
  var temp = i;//调用时局部变量  
  ps[i].onclick = function() {  
  alert(temp);  
  }  
 })();  
 }


//save3:加一层闭包，返回一个函数作为响应事件（注意与3的细微区别） 
 for( var i=0; i<ps.length; i++ ) {  
 ps[i].onclick = function(arg) {  
  return function() {//返回一个函数  
  alert(arg);  
  }  
 }(i);  
 } 


//save4:将变量 i 保存给在每个段落对象（p）上  
 for( var i=0; i<ps.length; i++ ) {  
  ps[i].i = i;  
  ps[i].onclick = function() {  
  alert(this.i);  
  }  
 }


//save5:将变量 i 保存在匿名函数自身  
 for( var i=0; i<ps.length; i++ ) {  
 (ps[i].onclick = function() {  
  alert(arguments.callee.i);  
 }).i = i;  
 }   
} 


//save6:用Function实现，实际上每产生一个函数实例就会产生一个闭包
 for( var i=0; i<ps.length; i++ ) {  
  ps[i].onclick = new Function("alert(" + i + ");");//new一次就产生一个函数实例 
 } 


//save7:用Function实现，注意与6的区别  
 for( var i=0; i<ps.length; i++ ) {  
   ps[i].onclick = Function(&#39;alert(&#39;+i+&#39;)&#39;); 
 }

Nach dem Login kopieren

Der obige Artikel diskutiert kurz das Problem der js-for-Schleife, die i als denselben Wert ausgibt, was der gesamte Editor ist hat mit Ihnen geteilt Der Inhalt ist vollständig, ich hoffe, er kann Ihnen eine Referenz geben, und ich hoffe auch, dass jeder die chinesische PHP-Website unterstützt.

Weitere Artikel zum Problem, dass js für Schleifen i als denselben Wert ausgibt, finden Sie auf der chinesischen PHP-Website!