jQuery将更多参数传递给回调

问题描述

有没有办法在 jQuery 中将更多数据传递给回调函数?

Is there a way to pass more data into a callback function in jQuery?

我有两个函数，我希望回调到 $.post，例如，传递 AJAX 调用的结果数据以及一些自定义参数

I have two functions and I want the callback to the $.post, for example, to pass in both the resulting data of the AJAX call, as well as a few custom arguments

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 调用返回的结果传递给回调.

I want to be able to pass in my own parameters to a callback, as well as the result returned from the AJAX call.

推荐答案

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

The solution is the binding of variables through closure.

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

As a more basic example, here is an example function that receives and calls a callback function, as well as an example callback function:

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

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

这会调用回调并提供一个参数.现在你想提供一个额外的参数，所以你将回调包装在闭包中.

This calls the callback and supplies a single argument. Now you want to supply an additional argument, so you wrap the callback in closure.

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

或者，更简单地使用 ES6 箭头函数:

Or, more simply using ES6 Arrow Functions:

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

<小时>

至于您的具体示例，我没有在 jQuery 中使用 .post 函数，但快速浏览文档表明回调应该是 函数指针 带有以下签名:

As for your specific example, I haven't used the .post function in jQuery, but a quick scan of the documentation suggests the call back should be a function pointer with the following signature:

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

因此我认为解决方案如下:

Therefore I think the solution is as follows:

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) 是 invoked 并且该调用的结果是一个 function pointer.

In the last line, doSomething(extraStuff) is invoked and the result of that invocation is a function pointer.

因为 extraStuff 作为参数传递给 doSomething 它在 doSomething 函数的范围内.

Because extraStuff is passed as an argument to doSomething it is within scope of the doSomething function.

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

When extraStuff is referenced in the returned anonymous inner function of doSomething it is bound by closure to the outer function's extraStuff argument. This is true even after doSomething has returned.

我还没有测试过上述内容，但我在过去 24 小时内编写了非常相似的代码，并且它的工作原理与我所描述的一样.

I haven't tested the above, but I've written very similar code in the last 24 hours and it works as I've described.

您当然可以传递多个变量而不是单个extraStuff"对象，具体取决于您的个人偏好/编码标准.

You can of course pass multiple variables instead of a single 'extraStuff' object depending on your personal preference/coding standards.

这篇关于jQuery将更多参数传递给回调的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！