JavaScript、jQuery、 'this'：ここで何が起こっていますか？

Question

これは私のコードで何が起こっているのかというともっと疑問です。それは動作しますが、私は少し悟りが必要です...

私はjQueryを使ってテキスト入力要素にイベントリスナーを作成しています。次のようにHTMLは、単純に次のようになります。

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

私はいつでも誰かの種類そのフィールドに何かをするイベントを受け取るために、私は私のイベントとなるようタイマーでイベントリスナーを設定したイベントが殺到されるのを避ける必要がありますユーザーが125ミリ秒間何も入力されていない場合は、リスナーのコードが実行のみ：

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

これは動作しますが、私はここで起こってすべてを理解すれば、かなりよく分かりません。上記のコードからわかるように、最後のイベントで作成されたタイマーのIDを追跡する必要があります。私はそれをthis.timerに保存することで行います。ただし、この場合のthisキーワードはinput要素を参照します。これは何console.log出力です：

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

は、それが入力要素にタイマーIDを保存するためにOKですか？私が知っているすべてのために、私は何か愚かなことをしている可能性があります。これは「ベストプラクティス」ですか、それとも非常に異なるものでしょうか？

Answer 1

一般に、DOMオブジェクトにそれ以上の値を直接配置しない方がよいです。 DOMが成熟するにつれて、あなたが選択した名前空間が他の目的のためにDOMによって使用される可能性があります。この他のスクリプトと同様に、名前空間の競合が発生する可能性があります。これを行う必要がある場合は、あいまいな名前空間を使用してこのリスクを軽減してください。古いバージョンのIEでは、DOMノードをシリアライズする際に、奇妙な値を持つtimerというノードの実際の属性で終わる可能性があります。これと同様に、console.logはDOMノードのプロパティのリストを返さないため、デバッグはもっと複雑になります。

一般に、DOMをそのままにして、ドキュメントオブジェクトで定義されているプロパティを参照することをお勧めします。私の意見では、ハンドラーと一緒に匿名関数内のパブリック静的変数に相当するタイマーを配置する方が良いでしょう。これにより、誤ってタイマーを上書きしてコードモジュラーを保つスコープの問題を回避できます。

(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);