js for ループ出力 i が同じ値の問題-jsチュートリアル-php.cn

js for ループ出力 i が同じ値の問題

高洛峰

リリース： 2017-03-01 16:11:36

オリジナル

2061 人が閲覧しました

1. 最近開発中に問題が発生しました。出力が常に 5 になるのはなぜですか。各 p をクリックする代わりに、対応する 1、2、3、4、5 が警告されます。コードは次のとおりです。P

<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>

ログイン後にコピー

ES任意のPをクリックすると、ポップアップは5号順になります：

JSイベントハンドラーはスレッドのアイドル時間中には実行されないため、最後の実行中に i の最終値が出力されます。つまり、 5

2. 解決策: クロージャを使用して変数 i の値を保護します。

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

ログイン後にコピー

上記の記事は、js for ループが i を同じ値として出力する問題について簡単に説明したもので、エディターが共有した内容です。参考になれば幸いです。誰もが PHP 中国語 Web サイトをサポートするようになります。

js for ループで i が同じ値として出力される問題に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。