JavaScript:将parameter passing给callback函数
我试图传递一个函数作为callback函数,我该怎么做?
function tryMe (param1, param2) { alert (param1 + " and " + param2); } function callbackTester (callback, param1, param2) { callback (param1, param2); } callbackTester (tryMe, "hello", "goodbye");
如果你想要一些更一般的东西,你可以像这样使用参数variables:
function tryMe (param1, param2) { alert(param1 + " and " + param2); } function callbackTester (callback) { callback (arguments[1], arguments[2]); } callbackTester (tryMe, "hello", "goodbye");
但是,否则,你的例子工作正常(参数[0]可以用来代替testing仪的callback)
这也将工作:
// 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); });
你的问题不清楚。 如果您问的是如何以更简单的方式做到这一点,则应该查看ECMAScript第5版method.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文档
当你有一个callback将被具有特定数量的参数的代码以外的东西调用,并且你想传递额外的参数时,你可以传递一个包装函数作为callback,并且在包装内部传递附加的参数。
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");})
代码从任何数量的参数和callback上下文的问题:
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
在这个简单的例子中使用curried函数。
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>
一个新版本的场景,callback将被其他函数调用,而不是您自己的代码,并且您想添加其他参数。
例如,让我们假装你有很多嵌套的调用成功和错误callback。 我将在这个例子中使用angular度承诺,但任何带callback的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); });
现在,您可能希望通过定义一个函数来logging错误,从而保持错误的来源,以便debugging。 这是你将如何着手重构你的代码:
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); };
调用函数仍将在您的callback函数参数之后添加错误参数。
我正在寻找相同的东西,最终解决scheme,这是一个简单的例子,如果有人想要通过这个。
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')
另外在这里发布的其他问题