타이머와 포스트 아약스 요청 사이에 객체 전달하기 (익명 함수)

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