jQuery将更多参数传递给回调

是否有一种方法可以在jQuery中传递更多的数据到回调函数?

我有两个函数，我想回调到$。例如，使用post来传递AJAX调用的结果数据和一些自定义参数

function clicked() {
    var myDiv = $("#my-div");
    // ERROR: Says data not defined
    $.post("someurl.php",someData,doSomething(data, myDiv),"json"); 
    // ERROR: Would pass in myDiv as curData (wrong)
    $.post("someurl.php",someData,doSomething(data, myDiv),"json"); 
}

function doSomething(curData, curDiv) {

}

我希望能够将自己的参数传递给回调，以及从AJAX调用返回的结果。

当前回答

解决方案是通过闭包绑定变量。

作为一个更基本的例子，这里有一个接收和调用回调函数的例子函数，以及一个回调函数的例子:

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"

至于你的具体例子，我没有在jQuery中使用过.post函数，但快速扫描文档建议回调应该是一个具有以下签名的函数指针:

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(extrastutff)，调用的结果是一个函数指针。

因为extraStuff是作为参数传递给doSomething的，所以它在doSomething函数的范围内。

当在返回的匿名内部函数doSomething中引用extraStuff时，它通过闭包绑定到外部函数的extraStuff参数。即使在doSomething返回之后也是如此。

我还没有对上面的代码进行测试，但我在过去24小时内编写了非常类似的代码，它的工作原理正如我所描述的那样。

当然，你可以传递多个变量，而不是一个“extraStuff”对象，这取决于你的个人偏好/编码标准。

2009-06-02 12:18:18

其他回答

使用.ajax() jQuery API和闭包向回调函数传递附加参数的更通用的发送异步请求的解决方案:

function sendRequest(method, url, content, callback) {
    // additional data for the callback
    var request = {
        method: method,
        url: url
    };

    $.ajax({
        type: method,
        url: url,
        data: content
     }).done(function(data, status, xhr) {
        if (callback) callback(xhr.status, data, request);
     }).fail(function(xhr, status) {
        if (callback) callback(xhr.status, xhr.response, request);
     });
};

2013-09-02 10:26:48

作为b01的答案的补充，$的第二个参数。代理通常用于保存this引用。附加参数传递给$。代理部分应用于函数，用数据预填充它。注意任何参数$.;传递给回调函数的post函数将在最后被应用，所以doSomething函数的参数列表末尾应该有这些参数:

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

function doSomething(curDiv, curData) {
    //"this" still refers to the same "this" as clicked()
    var serverResponse = curData;
}

这种方法还允许将多个参数绑定到回调:

function clicked() {
    var myDiv = $("#my-div");
    var mySpan = $("#my-span");
    var isActive = true;
    var callback = $.proxy(doSomething, this, myDiv, mySpan, isActive);
    $.post("someurl.php",someData,callback,"json"); 
}

function doSomething(curDiv, curSpan, curIsActive, curData) {
    //"this" still refers to the same "this" as clicked()
    var serverResponse = curData;
}

2011-10-08 18:06:35

实际上，你的代码不能工作，因为当你写:

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

将函数调用作为第三个形参而不是函数引用。

2009-06-02 11:53:15