JavaScript:向回调函数传递参数

小开

最佳答案

如果你想要一些更一般的东西，你可以像这样使用arguments变量:

function tryMe(param1, param2) {
alert(param1 + " and " + param2);
}


function callbackTester(callback) {
callback(arguments[1], arguments[2]);
}


callbackTester(tryMe, "hello", "goodbye");

但除此之外，你的例子工作得很好(arguments[0]可以在测试器中用来代替callback)

小开

你的问题不清楚。如果你在问如何以更简单的方式做到这一点，你应该看看ECMAScript第5版方法.bind ()，它是Function.prototype的成员。使用它，你可以做这样的事情:

function tryMe (param1, param2) {
alert (param1 + " and " + param2);
}


function callbackTester (callback) {
callback();
}


callbackTester(tryMe.bind(null, "hello", "goodbye"));

你也可以使用下面的代码，它会在当前浏览器中不可用时添加方法:

// From Prototype.js
if (!Function.prototype.bind) { // check if native implementation available
Function.prototype.bind = function(){
var fn = this, args = Array.prototype.slice.call(arguments),
object = args.shift();
return function(){
return fn.apply(object,
args.concat(Array.prototype.slice.call(arguments)));
};
};
}

使用实例

bind() - PrototypeJS Documentation

小开

这也可以:

// callback function
function tryMe(param1, param2) {
alert(param1 + " and " + param2);
}


// callback executer
function callbackTester(callback) {
callback();
}


// test function
callbackTester(function() {
tryMe("hello", "goodbye");
});

另一个场景:

// callback function
function tryMe(param1, param2, param3) {
alert(param1 + " and " + param2 + " " + param3);
}


// callback executer
function callbackTester(callback) {
//this is the more obivous scenario as we use callback function
//only when we have some missing value
//get this data from ajax or compute
var extraParam = "this data was missing";


//call the callback when we have the data
callback(extraParam);
}


// test function
callbackTester(function(k) {
tryMe("hello", "goodbye", k);
});

小开

当你有一个回调函数，它将被你的代码以外的东西调用，具有特定数量的参数，你想传递额外的参数，你可以传递一个包装器函数作为回调，并在包装器内部传递额外的参数。

function login(accessedViaPopup) {
//pass FB.login a call back function wrapper that will accept the
//response param and then call my "real" callback with the additional param
FB.login(function(response){
fb_login_callback(response,accessedViaPopup);
});
}


//handles respone from fb login call
function fb_login_callback(response, accessedViaPopup) {
//do stuff
}

小开

将作为参数传递的“子”函数包装在函数包装器中，以防止在调用“父”函数时计算它们。

function outcome(){
return false;
}


function process(callbackSuccess, callbackFailure){
if ( outcome() )
callbackSuccess();
else
callbackFailure();
}


process(function(){alert("OKAY");},function(){alert("OOPS");})

小开

带有任意数量参数和回调上下文的问题的代码:

function SomeFunction(name) {
this.name = name;
}
function tryMe(param1, param2) {
console.log(this.name + ":  " + param1 + " and " + param2);
}
function tryMeMore(param1, param2, param3) {
console.log(this.name + ": " + param1 + " and " + param2 + " and even " + param3);
}
function callbackTester(callback, callbackContext) {
callback.apply(callbackContext, Array.prototype.splice.call(arguments, 2));
}
callbackTester(tryMe, new SomeFunction("context1"), "hello", "goodbye");
callbackTester(tryMeMore, new SomeFunction("context2"), "hello", "goodbye", "hasta la vista");


// context1: hello and goodbye
// context2: hello and goodbye and even hasta la vista

小开

回调函数将由其他函数调用，而不是由您自己的代码调用，并且您希望添加其他参数的场景的新版本。

例如，假设您有许多带有成功回调和错误回调的嵌套调用。我将在这个例子中使用角承诺，但任何带回调的javascript代码都是相同的目的。

someObject.doSomething(param1, function(result1) {
console.log("Got result from doSomething: " + result1);
result.doSomethingElse(param2, function(result2) {
console.log("Got result from doSomethingElse: " + result2);
}, function(error2) {
console.log("Got error from doSomethingElse: " + error2);
});
}, function(error1) {
console.log("Got error from doSomething: " + error1);
});

现在，您可能希望通过定义一个函数来记录错误，保留错误的起源以用于调试，从而整理代码。这是你如何继续重构你的代码:

someObject.doSomething(param1, function (result1) {
console.log("Got result from doSomething: " + result1);
result.doSomethingElse(param2, function (result2) {
console.log("Got result from doSomethingElse: " + result2);
}, handleError.bind(null, "doSomethingElse"));
}, handleError.bind(null, "doSomething"));


/*
* Log errors, capturing the error of a callback and prepending an id
*/
var handleError = function (id, error) {
var id = id || "";
console.log("Got error from " + id + ": " + error);
};

调用函数仍然会在回调函数参数之后添加error参数。

小开

我一直在寻找同样的东西，最后得到了答案如果有人想要看的话，这是一个简单的例子。

var FA = function(data){
console.log("IN A:"+data)
FC(data,"LastName");
};
var FC = function(data,d2){
console.log("IN C:"+data,d2)
};
var FB = function(data){
console.log("IN B:"+data);
FA(data)
};
FB('FirstName')

也张贴在另一个问题在这里

小开

在这个简单的例子中使用curry函数。

const BTN = document.querySelector('button')
const RES = document.querySelector('p')


const changeText = newText => () => {
RES.textContent = newText
}


BTN.addEventListener('click', changeText('Clicked!'))

<button>ClickMe</button>
<p>Not clicked<p>

小开

如果你不确定要将多少参数传递给回调函数，请使用apply函数。

function tryMe (param1, param2) {
alert (param1 + " and " + param2);
}


function callbackTester(callback,params){
callback.apply(this,params);
}


callbackTester(tryMe,['hello','goodbye']);

小开

让我给你一个非常简单的使用回调的Node.js风格的例子:

/**
* Function expects these arguments:
* 2 numbers and a callback function(err, result)
*/
var myTest = function(arg1, arg2, callback) {
if (typeof arg1 !== "number") {
return callback('Arg 1 is not a number!', null); // Args: 1)Error, 2)No result
}
if (typeof arg2 !== "number") {
return callback('Arg 2 is not a number!', null); // Args: 1)Error, 2)No result
}
if (arg1 === arg2) {
// Do somethign complex here..
callback(null, 'Actions ended, arg1 was equal to arg2'); // Args: 1)No error, 2)Result
} else if (arg1 > arg2) {
// Do somethign complex here..
callback(null, 'Actions ended, arg1 was > from arg2'); // Args: 1)No error, 2)Result
} else {
// Do somethign else complex here..
callback(null, 'Actions ended, arg1 was < from arg2'); // Args: 1)No error, 2)Result
}
};




/**
* Call it this way:
* Third argument is an anonymous function with 2 args for error and result
*/
myTest(3, 6, function(err, result) {
var resultElement = document.getElementById("my_result");
if (err) {
resultElement.innerHTML = 'Error! ' + err;
resultElement.style.color = "red";
//throw err; // if you want
} else {
resultElement.innerHTML = 'Result: ' + result;
resultElement.style.color = "green";
}
});

以及将呈现结果的HTML:

<div id="my_result">
Result will come here!
</div>

你可以在这里使用它:https://jsfiddle.net/q8gnvcts/ -例如，尝试传递字符串而不是数字:myTest('some string'， 6，函数(错误，结果)..看看结果如何。

我希望这个例子对你有所帮助，因为它代表了回调函数的基本概念。

小开

function tryMe(param1, param2) {
console.log(param1 + " and " + param2);
}


function tryMe2(param1) {
console.log(param1);
}


function callbackTester(callback, ...params) {
callback(...params);
}






callbackTester(tryMe, "hello", "goodbye");


callbackTester(tryMe2, "hello");

阅读更多关于扩展语法

小开

//Suppose function not taking any parameter means just add the GetAlterConfirmation(function(result) {});
GetAlterConfirmation('test','messageText',function(result) {
alert(result);
}); //Function into document load or any other click event.




function GetAlterConfirmation(titleText, messageText, _callback){
bootbox.confirm({
title: titleText,
message: messageText,
buttons: {
cancel: {
label: '<i class="fa fa-times"></i> Cancel'
},
confirm: {
label: '<i class="fa fa-check"></i> Confirm'
}
},
callback: function (result) {
return _callback(result);
}
});

小开

我试图传递一些参数给一个函数用作callback，我怎么能这样做?

我认为他是在暗示他想要调用这个函数callbackTester(tryMe, "hello", "goodbye")。为此，我们可以使用Rest操作符(…)。此操作符接受函数接收到的参数，并将它们转储到真正的数组中，以便在callback函数中访问。

现在，其他一些开发人员可能也认为我们可以使用arguments "数组"。那很好，但我们要小心。arguments是不是真正的数组，但是一个具有length属性的类数组对象。

下面是一个使用Rest操作符的工作代码片段:

function tryMe(params) {
console.log(params.join(', '));
}


function callbackTester(callback, ...params) {
callback(params);
}


callbackTester(tryMe, 'hello', 'goodbye', 'hi again');
callbackTester(tryMe, 'hello', 'goodbye');
callbackTester(tryMe, 'hello');

小开

最近遇到了这个问题，要得到它(特别是如果父函数有多个参数做不同的事情，与回调无关，是将回调与它的参数放在一个箭头函数中作为参数传递。

function tryMe(param1, param2) {
alert(param1 + " and " + param2);
}


function callbackTester(callback, someArg, AnotherArg) {
callback();
  

}


callbackTester(()=> tryMe("hello", "goodbye"), "someArg", "AnotherArg");

.．.或者简单地说，如果你没有多个参数做其他的事情。

function tryMe(param1, param2) {
alert(param1 + " and " + param2);
}


function callbackTester(callback) {
callback();
}


callbackTester(()=> tryMe("hello", "goodbye"));

小开

只需使用bind()函数，该函数主要用于设置this值。然而，我们也可以使用它来传递参数而不调用函数，因为bind()返回一个带有提供的参数序列的新函数。

例子:

function foo(param1, param2, param3) {
console.log(param1, param2, param3);
}


setTimeout(foo.bind(null, 'foo', 'bar', 'baz'), 1000);

在上面的代码片段中，setTimeout函数接受两个参数，回调函数和函数被调用的最小时间(以ms为单位)，因此在传递回调函数时，我们将使用bind并指定参数

注意:bind的第一个参数是我们想要为this设置的值，因为我们对此不感兴趣，所以传递了null, bind中的后续参数将是回调的参数。