[javascript] jQuery는 더 많은 매개 변수를 콜백에 전달

해결책은 클로저를 통한 변수 바인딩입니다.

보다 기본적인 예로, 콜백 함수와 콜백 함수를 수신하고 호출하는 함수 예는 다음과 같습니다.

function callbackReceiver(callback) {
    callback("Hello World");
}

function callback(value1, value2) {
    console.log(value1, value2);
}

콜백을 호출하고 단일 인수를 제공합니다. 이제 추가 인수를 제공하여 콜백을 닫습니다.

callbackReceiver(callback);     // "Hello World", undefined
callbackReceiver(function(value) {
    callback(value, "Foo Bar"); // "Hello World", "Foo Bar"
});

또는 ES6 화살표 함수 를 사용하는 것이 더 간단합니다 .

callbackReceiver(value => callback(value, "Foo Bar")); // "Hello World", "Foo Bar"

귀하의 특정 예에 관해서는, .postjQuery 에서 함수를 사용하지 않았지만 설명서를 빠르게 스캔하면 콜백 이 다음 서명 이있는 함수 포인터 여야한다고 제안합니다 .

function callBack(data, textStatus, jqXHR) {};

따라서 해결책은 다음과 같습니다.

var doSomething = function(extraStuff) {
    return function(data, textStatus, jqXHR) {
        // do something with extraStuff
    };
};

var clicked = function() {
    var extraStuff = {
        myParam1: 'foo',
        myParam2: 'bar'
    }; // an object / whatever extra params you wish to pass.

    $.post("someurl.php", someData, doSomething(extraStuff), "json");
};

무슨 일이야?

마지막 줄에서 doSomething(extraStuff)됩니다 호출 하고 호출의 결과는 인 함수 포인터 .

extraStuff인수로 전달 되므로 함수 doSomething범위 내에 doSomething있습니다.

extraStuff반환 된 익명의 내부 함수에서 참조 되면 doSomething외부 함수의 extraStuff인수 에 대한 클로저로 바인딩됩니다 . doSomething돌아온 후에도 마찬가지 입니다.

위의 테스트를 수행하지는 않았지만 지난 24 시간 동안 매우 유사한 코드를 작성했으며 설명한대로 작동합니다.

물론 개인 취향 / 코딩 표준에 따라 단일 ‘extraStuff’객체 대신 여러 변수를 전달할 수 있습니다.

답변

function clicked() {
    var myDiv = $("#my-div");
    $.post("someurl.php",someData, function(data){
      doSomething(data, myDiv)
    },"json");
}

function doSomething(curData, curDiv) {
    ...
}

<script type="text/javascript">
$(".qty input").bind("keypress change", function() {
    $.ajax({
        url: "/order_items/change/"+$(this).attr("data-order-item-id")+"/qty:"+$(this).val()+"/returnas.json",
        type: "POST",
        dataType: "json",
        qty_input: $(this),
        anything_else_i_want_to_pass_in: "foo",
        success: function(json_data, textStatus, jqXHR) {
            /* here is the input, which triggered this AJAX request */
            console.log(this.qty_input);
            /* here is any other parameter you set when initializing the ajax method */
            console.log(this.anything_else_i_want_to_pass_in);
        }
    });
});
</script>

function clicked()
{
    var myDiv = $( "#my-div" );

    $.post( "someurl.php", {"someData": someData}, $.proxy(doSomething, myDiv), "json" );
}

function doSomething( data )
{
    // this will be equal to myDiv now. Thanks to jQuery.proxy().
    var $myDiv = this;

    // doing stuff.
    ...
}

function clicked() {

    var myDiv = $("#my-div");

    $.post("someurl.php",someData,function(data){
        doSomething(data, myDiv);
    },"json");
}

function doSomething(curData, curDiv) {

}

function wrapper( var1, var2,....) // put here your variables
{
  return function( data, status)
  {
     //Handle here results of call
  }
};

$.post("someurl.php",data,wrapper(var1, var2, etc...),"html");

function custom_func(p1,p2) {
    $.post(AJAX_FILE_PATH,{op:'dosomething',p1:p1},
        function(data){
            return function(){
                alert(data);
                alert(p2);
            }(data,p2)
        }
    );
    return false;
}