집 > 기사 > 웹 프론트엔드 > js for 루프 출력 i는 동일한 값 문제입니다.

js for 루프 출력 i는 동일한 값 문제입니다.

高洛峰원래의: 2017-03-01 16:11:362105검색

1. 최근 개발 중에 문제가 발생했습니다. 왜 출력이 항상 5인지, 각 p를 클릭하는 대신 해당 1, 2, 3, 4, 5가 경고됩니다.

코드는 다음과 같습니다.

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

이때, 아무 p나 클릭하면 팝업이 5개 뜹니다

발생원인: js 이벤트 프로세서는 동안 실행되지 않습니다. 최종 런타임의 결과인 스레드의 유휴 시간 출력은 i의 마지막 값입니다. 즉: 5

2. 해결 방법: 클로저를 사용하여 값을 보호합니다. 변수 나.

//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 loop가 i를 같은 값으로 출력하는 문제에 대해 간략하게 설명하고 있습니다. 편집자님, 모든 분들에게 참고가 되기를 바라며, 또한 모두가 PHP 중국어 웹사이트를 지지해 주시길 바랍니다.

js for loop가 i를 동일한 값으로 출력하는 문제와 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!

성명：

이전 기사：JavaScript 드롭다운 메뉴 기능다음 기사：JavaScript 드롭다운 메뉴 기능

js for 루프 출력 i는 동일한 값 문제입니다.

관련 기사