Maison >interface Web >js tutoriel >js pour la sortie de boucle, j'ai le même problème de valeur

js pour la sortie de boucle, j'ai le même problème de valeur

高洛峰original: 2017-03-01 16:11:362125parcourir

1. Récemment, j'ai rencontré un problème lors du développement. Pourquoi la sortie est-elle toujours 5, au lieu de cliquer sur chaque p, les 1, 2, 3, 4, 5 correspondants seront alertés.

Le code est le suivant :

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

À ce moment, cliquez sur n'importe quel p et la fenêtre contextuelle sera 5

Cause : le processeur d'événements js ne fonctionnera pas pendant le temps d'inactivité du thread, résultant de la dernière exécution Lorsque la sortie est la dernière valeur de i, soit : 5

2. Solution : utilisez la fermeture pour protéger la valeur de la variable 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;); 
 }

L'article ci-dessus aborde brièvement le problème de js pour la sortie de boucle i avec la même valeur, qui est tout l'éditeur a partagé avec vous Le contenu est complet, j'espère qu'il pourra vous donner une référence, et j'espère aussi que tout le monde soutiendra le site PHP chinois.

Pour plus d'articles liés au problème de la boucle js for produisant i avec la même valeur, veuillez faire attention au site Web PHP chinois !

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Fonction de menu déroulant JavaScriptArticle suivant：Fonction de menu déroulant JavaScript

Articles Liés

Voir plus