javascript - jQuery将更多参数传递给回调(jQuery pass more parameters into callback)

Question

Is there a way to pass more data into a callback function in jQuery?(有没有办法将更多数据传递给jQuery中的回调函数？)

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(我有两个函数，我想要回调$.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) { } I want to be able to pass in my own parameters to a callback, as well as the result returned from the AJAX call.(我希望能够将自己的参数传递给回调，以及从AJAX调用返回的结果。)   ask by atp translate from so

Answer 1

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" }); Or, more simply using ES6 Arrow Functions :(或者，更简单地使用ES6箭头功能 ：) callbackReceiver(value => callback(value, "Foo Bar")); // "Hello World", "Foo Bar" 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 pointerwith the following signature: (至于你的具体例子，我没有在jQuery中使用.post函数，但快速扫描文档表明回调应该是一个带有以下签名的函数指针：) 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"); }; What is happening?(怎么了？) In the last line, doSomething(extraStuff) is invokedand the result of that invocation is a function pointer. (在最后一行中， 调用doSomething(extraStuff) ，并且该调用-->的结果是函数指针。) Because extraStuff is passed as an argument to doSomething it is within scope of the doSomething function.(因为extraStuff作为doSomething的参数传递，所以它在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.(当doSomething返回的匿名内部函数中引用extraStuff ，它将被闭包绑定到外部函数的extraStuff参数。) This is true even after doSomething has returned.(即使在doSomething返回后也是如此。) 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.(我没有测试过上面的内容，但是我在过去的24小时内编写了非常相似的代码，它的工作原理正如我所描述的那样。) You can of course pass multiple variables instead of a single 'extraStuff' object depending on your personal preference/coding standards.(您当然可以传递多个变量而不是单个'extraStuff'对象，具体取决于您的个人偏好/编码标准。)