Question Passer une fonction JavaScript en tant que paramètre


Comment passer une fonction en paramètre sans la fonction s'exécutant dans la fonction "parent" ou en utilisant eval()? (Depuis que j'ai lu que ce n'est pas sûr.)

J'ai ceci:

addContact(entityId, refreshContactList());

Cela fonctionne, mais le problème est que refreshContactList se déclenche lorsque la fonction est appelée, plutôt que lorsqu'elle est utilisée dans la fonction.

Je pourrais le contourner en utilisant eval(), mais ce n'est pas la meilleure pratique, d'après ce que j'ai lu. Comment puis-je passer une fonction en tant que paramètre dans JavaScript?


501
2017-11-08 09:34


origine


Réponses:


Vous avez juste besoin d'enlever la parenthèse:

addContact(entityId, refreshContactList);

Cela passe alors la fonction sans l'exécuter d'abord.

Voici un exemple:

function addContact(id, refreshCallback) {
    refreshCallback();
    // You can also pass arguments if you need to
    // refreshCallback(id);
}

function refreshContactList() {
    alert('Hello World');
}

addContact(1, refreshContactList);

725
2017-11-08 09:34



Si vous voulez passer une fonction, référencez-la simplement par nom sans les parenthèses:

function foo(x) {
    alert(x);
}
function bar(func) {
    func("Hello World!");
}

//alerts "Hello World!"
bar(foo);

Mais parfois vous pourriez vouloir passer une fonction avec des arguments inclus, mais ne l'appelle pas jusqu'à ce que le rappel soit appelé. Pour ce faire, lorsque vous l'appelez, enveloppez-le simplement dans une fonction anonyme, comme ceci:

function foo(x) {
   alert(x);
}
function bar(func) {
   func();
}

//alerts "Hello World!" (from within bar AFTER being passed)
bar(function(){ foo("Hello World!") });

Si vous préférez, vous pouvez également utiliser le appliquer fonction et avoir un troisième paramètre qui est un tableau des arguments, comme par exemple:

function eat(food1, food2)
{
    alert("I like to eat " + food1 + " and " + food2 );
}
function myFunc(callback, args)
{
    //do stuff
    //...
    //execute callback when finished
    callback.apply(this, args);
}

//alerts "I like to eat pickles and peanut butter"
myFunc(eat, ["pickles", "peanut butter"]); 

223
2018-06-06 23:11



Exemple 1:

funct("z", function (x) { return x; });

function funct(a, foo){
    foo(a) // this will return a
}

Exemple 2:

function foodemo(value){
    return 'hello '+value;
}

function funct(a, foo){
    alert(foo(a));
}

//call funct    
funct('world!',foodemo); //=> 'hello world!'

regarde ça


40
2017-11-08 09:38



Pour passer la fonction en paramètre, il suffit de retirer les crochets!

function ToBeCalled(){
  alert("I was called");
}

function iNeedParameter( paramFunc) {
   //it is a good idea to check if the parameter is actually not null
   //and that it is a function
   if (paramFunc && (typeof paramFunc == "function")) {
      paramFunc();   
   }
}

//this calls iNeedParameter and sends the other function to it
iNeedParameter(ToBeCalled); 

L'idée derrière cela est qu'une fonction est assez similaire à une variable. Au lieu d'écrire

function ToBeCalled() { /* something */ }

vous pourriez aussi bien écrire

var ToBeCalledVariable = function () { /* something */ }

Il existe des différences mineures entre les deux, mais de toute façon, les deux sont des moyens valables pour définir une fonction. Maintenant, si vous définissez une fonction et que vous l'attribuez explicitement à une variable, cela semble assez logique, vous pouvez la passer en paramètre à une autre fonction, et vous n'avez pas besoin d'accolades:

anotherFunction(ToBeCalledVariable);

30
2017-11-08 09:37



Il y a une phrase parmi les programmeurs JavaScript: "Eval is Evil" alors essayez de l'éviter à tout prix!

En plus de la réponse de Steve Fenton, vous pouvez également passer directement des fonctions.

function addContact(entity, refreshFn) {
    refreshFn();
}

function callAddContact() {
    addContact("entity", function() { DoThis(); });
}

15
2017-11-08 09:39



Vous pouvez aussi utiliser eval() faire la même chose.

//A function to call
function needToBeCalled(p1, p2)
{
    alert(p1+"="+p2);
}

//A function where needToBeCalled passed as an argument with necessary params
//Here params is comma separated string
function callAnotherFunction(aFunction, params)
{
    eval(aFunction + "("+params+")");
}

//A function Call
callAnotherFunction("needToBeCalled", "10,20");

C'est tout. J'étais également à la recherche de cette solution et j'ai essayé des solutions fournies dans d'autres réponses, mais j'ai finalement obtenu le résultat de l'exemple ci-dessus.


5
2018-01-23 11:29



Je suggère de mettre les paramètres dans un tableau, puis les diviser en utilisant le .apply() fonction. Alors maintenant, nous pouvons facilement passer une fonction avec beaucoup de paramètres et l'exécuter de manière simple.

function addContact(parameters, refreshCallback) {
    refreshCallback.apply(this, parameters);
}

function refreshContactList(int, int, string) {
    alert(int + int);
    console.log(string);
}

addContact([1,2,"str"], refreshContactList); //parameters should be putted in an array

5
2017-09-26 17:44



J'ai coupé tous mes cheveux avec cette question. Je ne pouvais pas faire les exemples ci-dessus fonctionnant, alors j'ai fini comme:

function foo(blabla){
    var func = new Function(blabla);
    func();
}
// to call it, I just pass the js function I wanted as a string in the new one...
foo("alert('test')");

Et ça fonctionne comme un charme ... pour ce dont j'avais besoin au moins. J'espère que cela pourrait aider certains.


4
2018-04-15 09:31



Ici c'est une autre approche:

function a(first,second)    
{        
return (second)(first);           
}     

a('Hello',function(e){alert(e+ ' world!');}); //=> Hello world     

2
2018-01-15 16:14



En fait, semble un peu compliqué, n'est pas.

get method en paramètre:

 function JS_method(_callBack) { 

           _callBack("called");  

        }

Vous pouvez donner comme une méthode de paramètre:

    JS_method(function (d) {
           //Finally this will work.
           alert(d)
    });

2
2017-10-14 09:45



Les autres réponses font un excellent travail décrivant ce qui se passe, mais un "getcha" important est de s'assurer que tout ce que vous traversez est bien une référence à une fonction.

Par exemple, si vous passez une chaîne au lieu d'une fonction, vous obtenez une erreur:

function function1(my_function_parameter){
    my_function_parameter();   
}

function function2(){
 alert('Hello world');   
}

function1(function2); //This will work

function1("function2"); //This breaks!

Voir JsFiddle


2
2018-03-23 20:54