タイマーと投稿の間にオブジェクトを渡す（匿名関数）

Question

私はかなりの時間このトピックを苦労しており、クリックすることはありません！

&.post（WordPress処理済みAJAX）リクエストにオブジェクトを渡す必要がありますが、通常の変数を使用して正しく処理する方法がわかりません。その代わりに、私は$（document）を呼び出してそれをDOM要素（非常に醜いと遅い）を繰り返し実行する必要があります。

$(document).find('#sections_title').val() requestを代わりに使用して、ポストデータにタイトル変数をすべて渡すことができるように、このコードを修正する方法はありますか？

これを正しく行う方法を説明してください。

(function ($) { 
    var title = $('#sections_title'); 
    var timeout = 2000; 

    var delay = (function() { 
     var timer = 0; 

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

    title.keyup(function() { 

     // i would like to have variable here, that grabs the $(this).val() 
     // and use this variable to pass to the data 
     // var value = ....... 

     delay(function() { 
      $.post(
       ajaxurl, 
       { 
        'action': 'add_foobar', 
        'data': $(document).find('#sections_title').val() 
        // instead I would like: 
        // 'data': value 
       }, 
       function(response){ 
        alert('The server responded: ' + response); 
       } 
      ); 

     }, timeout); 
    })(); 
})(jQuery); 

Answer 1

これは、あなたのケースにとって最も簡単な方法です。 valをオブジェクトとしてコールバックにバインドします。それを使用する必要があるときに文字列にキャストします。

delay(function() { 
     $.post(
      ajaxurl, 
      { 
       'action': 'add_foobar', 
       'data': String(this) 
       // instead I would like: 
       // 'data': value 
      }, 
      function(response){ 
       alert('The server responded: ' + response); 
      } 
     ); 

    }.bind(Object($(this).val())), timeout); 

それともここに完全なコードです

(function ($) { 
    var title = $('#sections_title'); 
    var timeout = 2000; 

    var delay = (function() { 
     var timer = 0; 

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

    title.keyup(function() { 

     // i would like to have variable here, that grabs the $(this).val() 
     // and use this variable to pass to the data 
     // var value = ....... 

     delay(function() { 
      $.post(
       ajaxurl, 
       { 
        'action': 'add_foobar', 
        'data': String(this) 
        // instead I would like: 
        // 'data': value 
       }, 
       function(response){ 
        alert('The server responded: ' + response); 
       } 
      ); 

     }.bind(Object($(this).val())), timeout); 
    })(); 
})(jQuery); 

Answer 2

window objectで明示的に設定できます。ブラウザでは、node.jsなどの特定の環境を除いて、グローバルオブジェクトはウィンドウオブジェクトと同じです。

(function($) { 
    window.title = $('#sections_title'); 
    var timeout = 2000; 

    var delay = (function() { 
     var timer = 0; 

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

    title.keyup(function() {  
     delay(function() { 
      $.post(
       ajaxurl, { 
        'action': 'add_foobar', 
        'data': window.title 
       }, 
       function(response) { 
        alert('The server responded: ' + response); 
       } 
      ); 

     }, timeout); 
    })(); 
})(jQuery);