setTimeoutを使用したときの名前が未定義

Question

さまざまなテーブルの上部にある入力ボックスにこのようなコードを書き込んで、class='filt'を使用して、これらの入力に基づいてテーブルをフィルタリングできるようにしました。もちろん、ほとんどの入力は1文字以上ですので、タイマーや同様のデバウンス機能を追加したかったのです。以下のエラー

正常に動作しますが、私はタイマーを追加したとき、私は

を取得し始めた「e.nodenameが未定義である」

。何か案は？

<script> 
    var typingTimer; 
    var doneTypingInterval = 1000; 
    $('.filt').on('keyup', function() { 
     var children = $(this).parent().parent().find("input"); 
     clearTimeout(typingTimer); 
     typingTimer = setTimeout(function() { 
      $("#table1 tbody tr").show(); 
      for (var i = 0; i < children.length; i++) { 
       var tableChild = children[i]; 
       if (tableChild.value) { 
        var valarr = tableChild.value.split(",,"); //multiple filter separator 
        for (var az = 0; az < valarr.length; az++) { 
         if (valarr[az].charAt(0) == '~') { //negation operator 
          var val2 = valarr[az].substr(1); 
          $("#table1 tbody tr:not(:not(:has(td:eq(" + tableChild.id + "):contains('" + val2 + "'),td:eq(" + tableChild.id + ") [value*='" + val2 + "'])))").hide(); 
         } else {        //standard filter 
          $("#table1 tbody tr:not(:has(td:eq(" + tableChild.id + "):contains('" + valarr[az] + "'),td:eq(" + tableChild.id + ") [value*='" + valarr[az] + "']))").hide(); 
         } 
        } 
        $("#table1 tbody tr").eq(0).show(); 
       } 
      } 
      $(this).focus(); //annoying extra code for MS browsers 
      var thistext = $(this).val(); 
      $(this).val('').val(thistext); 
     }, doneTypingInterval); 
    }); 
</script> 

Answer 1

thisを次のように別のパラメータに設定してください。 setTimeoutには独自のスコープがあります。

<script> 
     var typingTimer; 
     var doneTypingInterval = 1000; 
     $('.filt').on('keyup', function() { 
      var children = $(this).parent().parent().find("input"); 
      clearTimeout(typingTimer); 

      //Get this into self 
      var self = this; 

      typingTimer = setTimeout(function() { 
       $("#table1 tbody tr").show(); 
       for (var i = 0; i < children.length; i++) { 
        var tableChild = children[i]; 
        if (tableChild.value) { 
         var valarr = tableChild.value.split(",,"); //multiple filter separator 
         for (var az = 0; az < valarr.length; az++) { 
          if (valarr[az].charAt(0) == '~') { //negation operator 
           var val2 = valarr[az].substr(1); 
           $("#table1 tbody tr:not(:not(:has(td:eq(" + tableChild.id + "):contains('" + val2 + "'),td:eq(" + tableChild.id + ") [value*='" + val2 + "'])))").hide(); 
          } else {        //standard filter 
           $("#table1 tbody tr:not(:has(td:eq(" + tableChild.id + "):contains('" + valarr[az] + "'),td:eq(" + tableChild.id + ") [value*='" + valarr[az] + "']))").hide(); 
          } 
         } 
         $("#table1 tbody tr").eq(0).show(); 
        } 
       } 
       $(self).focus(); //annoying extra code for MS browsers 
       var thistext = $(self).val(); 
       $(self).val('').val(thistext); 
      }, doneTypingInterval); 
     }); 
    </script> 

Answer 2

文脈上の問​​題です。 thisを参照していて、.filt要素を指していると思っていますが、タイムアウトコールバックがコンテキストをwindowに変更することはわかりません。

$('.foo').on('click', function() { 
    this; //is the clicked element 
    setTimeout(function() { 
     this; //is window 
    }, 1); 
}); 

別のthisを参照する方法はいくつかあります。 jQueryの.bind()を使用すると、あなたが好きなthis（要素）のcallbcakをコンテキストに合わせることができます。

$('.foo').on('click', function() { 
    this; //is the clicked element 
    setTimeout((function(outer_this) { return function() { 
     outer_this; //is also element 
    }; })(this), 1); 
}); 

それとも単に変数がタイムアウトに入る前に、それを参照します

$('.foo').on('click', function() { 
    this; //is the clicked element 
    setTimeout(function() { 
     this; //is also element 
    }.bind(this), 1); //<-- note bind() 
}); 

また、あなたもすぐに実行される機能を経由して、タイムアウトコールバックへの関数の引数として外側にこれを渡すことができます：

$('.foo').on('click', function() { 
    var outer_this = this; //<-- cache outer scope 
    this; //is the clicked element 
    setTimeout(function() { 
     outer_this; //is also element 
    }, 1); 
});