javascript - 関数内のjQuery$（this）

Question

$（this）を関数に渡したいのですが、よくわかりません。同様のスレッドが1つありますが、それでも機能させることはできません。誰かが私を助けてくれることを願っています。

$(document).ready(function() {
  var delay = (function(){
    var timer = 0;
    return function(callback, ms){
      clearTimeout (timer);
      timer = setTimeout(callback, ms);
    };
  })();

  $('input').keyup(function() {
      delay(function(){
        alert($(this).val());
      }, 1000 );
  });
});

Answer 1

これへの参照を保存する必要があります：

$('input').keyup(function() {
    var $this = $(this);
    delay(function(){
      alert($this.val());
    }, 1000 );
});

this別のオプションは、関数に再バインドすることです。

  $('input').keyup(function() {
      delay(function(){
        alert($(this).val());
      }.bind(this), 1000 );
  });

Answer 2

あなたは文脈を持ってくる必要があるでしょう：

return function(callback, ms, context){
  clearTimeout (timer);
  timer = setTimeout(function() {
      callback.call(context);
   }, ms);
};

その後

delay(function() {
    alert($(this).val());
}, 1000, this );

しかし、他の人が投稿したように、コンテキストをローカル変数に保存することが本当に必要な場合があります。これを行う別の方法は次のとおりです。

$('input').keyup(function() {
  delay((function(self) {
    return function() {
      alert($(self).val());
    };
  }(this)), 1000);
});

Answer 3

$(this)関数の外部への参照を保持します。

 // ...

    $('input').keyup(function() {
        var $this = $(this);
        delay(function() {
            alert( $this.val() );
        }, 1000)
    });

Answer 4

これは、関数スコープの変更により変更されました。クロージャを使用して値を格納する必要があります。

渡すのが$（this）を必要としない値だけの場合

$('input').keyup(function() {
  var val = this.value;
  delay(function(){
    alert(val);
  }, 1000 );
});

別の方法は

$('input').keyup(function() {
  delay((function(val){
    return function() {
      alert(val);
    };
  }(this.value)), 1000 );
});