JavaScript, jQuery et 'this' : que se passe-t-il ici ?

Question

Il s'agit plutôt d'une question sur ce qui se passe dans mon code. Il fonctionne, mais j'ai besoin d'un peu d'éclaircissement...

J'utilise jQuery pour créer un récepteur d'événements sur un élément de saisie de texte. Le code HTML serait simplement le suivant :

<input type="text" id="autocomplete" size="50" />

J'ai besoin de recevoir des événements chaque fois que quelqu'un tape quelque chose dans ce champ, et pour éviter d'être inondé d'événements, j'ai configuré l'écouteur d'événements avec un minuteur de sorte que mon code d'écouteur d'événements ne s'exécute que si l'utilisateur n'a pas tapé quelque chose pendant 125 ms :

jQuery('#autocomplete').keyup(function(e) {
  e.preventDefault();
  clearTimeout(this.timer);
  this.timer = setTimeout(function() {
    jQuery.getJSON([URL goes here], function(data) {
      // processing of returned data goes here.
    }
  }, 125);

console.log(this);
});

Cela fonctionne, mais je ne suis pas sûr de bien comprendre ce qui se passe ici. Comme vous le voyez dans le morceau de code ci-dessus, je dois garder une trace de l'élément ID du timer qui a été créé lors du dernier événement. Je le fais en le stockant dans this.timer . Cependant, le this Dans ce cas, le mot-clé fait référence à l'élément d'entrée. C'est ce que console.log des sorties :

<input type="text" id="autocomplete" size="50" />

Est-il possible d'enregistrer la minuterie ID sur l'élément de saisie ? Pour ce que j'en sais, il se peut que je fasse quelque chose de stupide. S'agit-il d'une "meilleure pratique" ou s'agit-il de quelque chose de très différent ?

Answer 1

En général, je préfère ne pas placer d'autres valeurs directement dans l'objet DOM. Au fur et à mesure que le DOM mûrit, il y a une faible chance que l'espace de noms que vous choisissez soit utilisé par le DOM à d'autres fins. De plus, d'autres scripts pourraient causer des conflits d'espace de noms, notamment avec une variable nommée timer. Si vous devez le faire, utilisez un espace de noms obscur pour atténuer ce risque. Les anciennes versions d'IE ont également un comportement étrange lorsqu'il s'agit de sérialiser un nœud DOM, vous pourriez vous retrouver avec un attribut réel dans le nœud appelé timer avec une valeur très étrange. En plus de cela, console.log ne renvoie pas une liste des propriétés des nœuds du DOM, ce qui rend le débogage plus complexe qu'il ne devrait l'être.

En général, il est préférable de laisser le DOM tel quel et de référencer ses propriétés telles qu'elles sont définies par l'objet document. A mon avis, il serait préférable de placer le timer dans l'équivalent d'une variable statique publique au sein d'une fonction anonyme avec votre handler, cela évite tout problème de portée où vous pourriez accidentellement écraser votre timer et permet à votre code de rester modulaire.

(function($) {

    // Static variable for this function
    var keyupTimer;

    // Event handler for keyup
    $('#autocomplete').keyup(function(event) 
    {
        event.preventDefault();

        clearTimeout(keyupTimer);

        keyupTimer = setTimeout(function()
        {
            $.getJSON([URL goes here], function(data)
            {
                // processing of returned data goes here.
            }
        }, 125);
    });
})(jQuery);