procedimiento - JavaScript: pasar parámetros a una función de devolución de llamada

pasar variables entre funciones javascript

Question

Estoy tratando de pasar algún parámetro a una función utilizada como devolución de llamada, ¿cómo puedo hacer eso?

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

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

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

Answer 1

Código de una pregunta con cualquier número de parámetros y un contexto de devolución de llamada:

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

Answer 2

Cuando tiene una devolución de llamada a la que llamará algo diferente a su código con un número específico de parámetros y desea pasar parámetros adicionales, puede pasar una función de envoltura como la devolución de llamada y, dentro del envoltorio, pasar los parámetros adicionales.

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
}

Answer 3

Envuelva las funciones ''secundarias'' que se pasan como / con argumentos dentro de los envoltorios de funciones para evitar que se evalúen cuando se llama a la función ''primaria''.

function outcome(){
    return false;
}

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

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

Answer 4

Estaba buscando lo mismo y terminé con la solución y aquí es un ejemplo simple si alguien quiere pasar por esto.

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'')

También publicado en la otra pregunta here

Answer 5

Esto también funcionaría:

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

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

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

Otro escenario:

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

Answer 6

Si no está seguro de cuántos parámetros va a pasar a las funciones de devolución de llamada. Utilizando aplicar.

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

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

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

Answer 7

Si quieres algo un poco más general, puedes usar la variable de argumentos así:

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

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

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

Pero de lo contrario, su ejemplo funciona bien (los argumentos [0] se pueden usar en lugar de la devolución de llamada en el comprobador)

Answer 8

Tu pregunta no está clara. Si está preguntando cómo puede hacer esto de una manera más simple, debería echar un vistazo al método de la 5ª edición de ECMAScript .bind () , que es miembro de Function.prototype . Usándolo, puedes hacer algo como esto:

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

function callbackTester (callback) {
    callback();
}

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

También puede usar el siguiente código, que agrega el método si no está disponible en el navegador actual:

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

Example

bind () - PrototypeJS Documentation

Answer 9

Una nueva versión para el escenario en el que la devolución de llamada será llamada por alguna otra función, no por su propio código, y desea agregar parámetros adicionales.

Por ejemplo, supongamos que tiene muchas llamadas anidadas con devoluciones de llamada de éxito y error. Usaré promesas angulares para este ejemplo, pero cualquier código javascript con devoluciones de llamada sería el mismo para este propósito.

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

Ahora puede querer despejar su código definiendo una función para registrar errores, manteniendo el origen del error para propósitos de depuración. Así es como procederías a refactorizar tu código:

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

La función de llamada seguirá agregando el parámetro de error después de los parámetros de la función de devolución de llamada.

Answer 10

Utilice la función curry como en este ejemplo simple.

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>