JavaScript:将参数传递给回调函数

IT技术 javascript callback parameter-passing
2021-01-21 13:47:54

我正在尝试将一些参数传递给用作 as 的函数callback,我该怎么做?

这是我的尝试:

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

function callbackTester(callback, param1, param2) {
  callback(param1, param2);
}

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

6个回答

如果你想要更一般的东西,你可以像这样使用参数变量:

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

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

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

但除此之外,您的示例工作正常(arguments[0]可以代替callback测试仪使用)

抱歉,这是主代码中的语法错误,我认为这是因为这是我第一次在 JavaScript 中使用回调,你帮助我理解它不是问题,并看到了一个很好的例子。
2021-03-21 13:47:54
只要我们本着通用的精神,callback.apply(arguments)因为函数体 forcallbackTester是可扩展的,超出了两个参数的场景。
2021-03-28 13:47:54
仅供参考,使用匿名函数(Marimuthu 的答案)或 .bind()(Andy 的答案)是将参数传递给回调的更简洁的方法。
2021-03-30 13:47:54

这也可以:

// 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);
});

这很有效,因为它也允许匿名函数传入如下参数: callbackTester (function(data) {tryMe(data, "hello", "goodbye"); });
2021-03-17 13:47:54
我还想检查回调实际上是一个函数。 if (typeof window[callback] == 'function') window[callback].call(this);
2021-04-03 13:47:54
这是最简单和最好的答案。
2021-04-03 13:47:54

你的问题不清楚。如果您问如何以更简单的方式执行此操作,您应该查看 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 文档

这个 .bind() 真的很棒并且扩展了回调的使用和简单性。作为理解它的基本示例,如果您有:f = function(arg1,arg2){alert(arg1+arg2);}.bind(this,"abc"); f("def") // Gives "abcdef"
2021-03-13 13:47:54
这是最优雅的答案
2021-03-27 13:47:54
@sje397:参数不是 *real* 数组,因此它没有slice()方法。但是,Array.prototypeslice()方法是有意通用的,因此您可以传递任何具有数字索引和长度属性的对象,并且它会起作用。
2021-03-28 13:47:54
这真的是一个很好的答案。很棒,对我来说效果很好。谢谢 :)
2021-03-30 13:47:54
出于兴趣,Array.prototype.slice.call(arguments)和 和有arguments.slice()什么区别
2021-04-10 13:47:54

如果您不确定将有多少参数传递给回调函数,请使用applyfunction。

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

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

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

当您有一个回调,该回调将被具有特定数量参数的代码以外的东西调用,并且您想传入额外的参数时,您可以将包装函数作为回调传递,并在包装​​器内部传递额外的参数。

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
}