JavaScript: Übergabe von Parametern an eine Callback-Funktion

Question

Ich versuche, einen Parameter an eine Funktion zu übergeben, die als callback Wie kann ich das tun?

Dies ist mein Versuch:

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

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

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

Answer 1

Die "Kind"-Funktion(en), die als/mit Argumente(n) übergeben werden, werden in Funktionsverschalungen verpackt, um zu verhindern, dass sie ausgewertet werden, wenn die "Eltern"-Funktion aufgerufen wird.

function outcome(){
    return false;
}

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

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

Answer 2

Code aus einer Frage mit einer beliebigen Anzahl von Parametern und einem Callback-Kontext:

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 3

Verwenden Sie die Funktion curried wie in diesem einfachen Beispiel.

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>

Answer 4

Konfrontiert dies vor kurzem, um es (vor allem, wenn die übergeordnete Funktion hat mehrere Argumente tun verschiedene stuffs nicht im Zusammenhang mit dem Rückruf, ist der Rückruf mit seinem Argument in einem Pfeil-Funktion als Argument übergeben platziert haben.

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

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

}

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

...oder einfach, wenn Sie nicht mehrere Argumente für andere Dinge haben.

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

function callbackTester(callback) {
  callback();
}

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

Answer 5

Eine neue Version für das Szenario, in dem der Callback von einer anderen Funktion aufgerufen wird, nicht von Ihrem eigenen Code, und Sie zusätzliche Parameter hinzufügen möchten.

Nehmen wir zum Beispiel an, dass Sie viele verschachtelte Aufrufe mit Erfolgs- und Fehlerrückrufen haben. Ich werde Angular Versprechen für dieses Beispiel verwenden, aber jeder Javascript-Code mit Rückrufe wäre das gleiche für den Zweck sein.

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

Nun möchten Sie vielleicht Ihren Code entrümpeln, indem Sie eine Funktion definieren, die Fehler protokolliert und den Ursprung des Fehlers zu Debugging-Zwecken festhält. So würden Sie vorgehen, um Ihren Code zu refaktorisieren:

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

Die aufrufende Funktion fügt den Fehlerparameter nach den Parametern Ihrer Callback-Funktion hinzu.