Référence JavaScript par valeur/par problème de référence

Question

Je crée un plugin jQuery pour faire de la pagination et j'ai rencontré le problème suivant. Lorsque je clique sur un lien de page créé par le plugin ci-dessous, il nous donnera toujours la valeur du dernier index passé dans la valeur i au dernier itérateur du code ci-dessous. S'il y a 4 pages, j'obtiendrai toujours 4 si j'appuie sur le lien 1, 2, 3 ou 4. Il semble que la référence au délégué onclick garde aussi une référence à la valeur de i au lieu de simplement la valeur.

Des idées? C'est le options.onclick (i) qui agit étrange.

$.fn.pager = function(options) { 
    var defaults = { 
     resultSet: undefined, 
     onclick: function(page) { alert(page); return false; }, 
    }; 

    return this.each(function() { 
     var rnd = Math.floor(Math.random()*9999) 
     var result = ''; 
     for(var i = 1; i <= options.resultSet.PageCount; i++) 
     { 
      if(i == options.resultSet.PageCount) 
       result += '<a href="#" id="' + rnd + '_pagerPage_' + i + '">' + i + '</a>'; 
      else 
       result += '<a href="#" id="' + rnd + '_pagerPage_' + i + '">' + i + '</a>' + options.separator; 
     } 

     $(this).html(result); 

     for(var i = 1; i <= options.resultSet.PageCount; i++) 
     { 
      $('#' + rnd + '_pagerPage_' + i).click(function() { options.onclick(i) }); 
     } 
    }); 
} 

J'ai réduit le code ci-dessus au cas de problème. Donc, certains contrôles manque quelque;)

Answer 1

Ceci est un problème classique: la valeur de i qui obtient utilisé à l'intérieur de l'option click fonction de gestionnaire d'événements est toute valeur i a au moment où l'événement se déclenche (qui sera 4, la valeur finale qu'il a dans la boucle), pas la valeur qu'il avait au point auquel vous avez assigné le gestionnaire d'événement. Le tour est de créer une fonction supplémentaire à chaque fois dans la boucle qui a sa propre variable contenant une copie de la valeur de i au point où il a été appelé:

var createClickHandler = function(n) { 
    return function() { options.onclick(n); }; 
}; 
$('#' + rnd + '_pagerPage_' + i).click(createClickHandler(i)); 

Answer 2

Il semble que le La référence au délégué onclick garde également une référence à la valeur de i au lieu de simplement la valeur.

Ce que vous vivez est votre première rencontre (inattendue) avec des fermetures. Ce n'est même pas une référence qui est en train d'être adoptée, c'est plus bizarre que ça. Pour comprendre ce qui se passe (et il est essentiel que vous faites si vous programmez en javascript, cela est considéré comme substance de base de nos jours) lire mes réponses aux questions connexes suivantes:

Please explain the use of JavaScript closures in loops

Hidden Features of JavaScript?