JavaScript: Passer des paramètres à une fonction de rappel

Si vous voulez quelque chose de légèrement plus général, vous pouvez utiliser la variable arguments de la manière suivante:

 function tryMe (param1, param2) { alert(param1 + " and " + param2); } function callbackTester (callback) { callback (arguments[1], arguments[2]); } callbackTester (tryMe, "hello", "goodbye"); 

Mais sinon, votre exemple fonctionne bien (les arguments [0] peuvent être utilisés à la place du rappel dans le testeur)

Cela fonctionnerait également:

 // callback function function tryMe (param1, param2) { alert (param1 + " and " + param2); } // callback executer function callbackTester (callback) { callback(); } // test function callbackTester (function() { tryMe("hello", "goodbye"); }); 

Un autre scénario:

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

Votre question n'est pas claire. Si vous demandez comment vous pouvez le faire de manière plus simple, vous devriez jeter un oeil à la méthode ECMAScript 5ème édition .bind () , qui est membre de Function.prototype . En l'utilisant, vous pouvez faire quelque chose comme ceci:

 function tryMe (param1, param2) { alert (param1 + " and " + param2); } function callbackTester (callback) { callback(); } callbackTester(tryMe.bind(null, "hello", "goodbye")); 

Vous pouvez également utiliser le code suivant, qui ajoute la méthode si elle n'est pas disponible dans le navigateur actuel:

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

Exemple

Bind () – PrototypeJS Documentation

Lorsque vous avez un rappel qui sera appelé par autre chose que votre code avec un nombre spécifique de paramètres et que vous souhaitez passer des params supplémentaires, vous pouvez passer une fonction wrapper car le rappel et à l'intérieur du wrapper passent les paramètres supplémentaires.

 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 } 

Enroulez la (s) fonction (s) 'enfant' (s) passée (s) avec / avec des arguments dans des enveloppes de fonction pour éviter qu'elles ne soient évaluées lorsque la fonction 'parent' est appelée.

 function outcome(){ return false; } function process(callbackSuccess, callbackFailure){ if ( outcome() ) callbackSuccess(); else callbackFailure(); } process(function(){alert("OKAY");},function(){alert("OOPS");}) 

Code d'une question avec un certain nombre de paramètres et un contexte de rappel:

 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 

Une nouvelle version pour le scénario où le rappel sera appelé par une autre fonction, pas votre propre code, et vous souhaitez ajouter des paramètres supplémentaires.

Par exemple, prétendons que vous avez beaucoup d'appels imbriqués avec des retours de réussite et d'erreur. J'utiliserai des promesses angulaires pour cet exemple, mais tout code javascript avec rappel sera le même à cet effet.

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

Vous voudrez peut-être désactiver votre code en définissant une fonction pour enregistrer les erreurs, en gardant l'origine de l'erreur à des fins de débogage. Voici comment procéder pour refactoriser votre code:

 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 fonction d'appel ajoutera toujours le paramètre d'erreur après les paramètres de votre fonction de rappel.

Je cherchais la même chose et finis avec la solution et voilà un exemple simple si quelqu'un veut passer par là.

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

Aussi posté sur l'autre question ici

Utilisez la fonction curry comme dans cet exemple 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>