web-dev-qa-db-ger.com

Übergeben Sie eine JavaScript-Funktion als Parameter

Wie übergebe ich eine Funktion als Parameter, ohne dass die Funktion in der übergeordneten Funktion ausgeführt wird oder eval() verwendet wird? (Da ich gelesen habe, dass es unsicher ist.)

Ich habe das:

addContact(entityId, refreshContactList());

Es funktioniert, aber das Problem ist, dass refreshContactList ausgelöst wird, wenn die Funktion aufgerufen wird, und nicht, wenn sie in der Funktion verwendet wird.

Ich könnte es mit eval() umgehen, aber es ist nicht die beste Übung, nach dem, was ich gelesen habe. Wie kann ich eine Funktion als Parameter in JavaScript übergeben?

601
imperium2335

Sie müssen nur die Klammer entfernen:

addContact(entityId, refreshContactList);

Dies übergibt dann die Funktion, ohne sie zuerst auszuführen.

Hier ist ein Beispiel:

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

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

addContact(1, refreshContactList);
846
Fenton

Wenn Sie eine Funktion übergeben möchten, referenzieren Sie sie einfach mit dem Namen ohne die Klammern:

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

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

Aber manchmal möchten Sie vielleicht eine Funktion mit Argumenten übergeben , diese aber erst aufrufen, wenn der Rückruf aufgerufen wird. Um dies zu tun, schließen Sie es beim Aufrufen einfach in eine anonyme Funktion ein:

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

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

Wenn Sie es vorziehen, können Sie auch die apply - Funktion verwenden und einen dritten Parameter haben, der ein Array der Argumente ist, wie z.

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"]); 
282
dallin

Beispiel 1:

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

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

Beispiel 2:

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

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

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

sieh dir das an

50
Gadde

Um die Funktion als Parameter zu übergeben, entfernen Sie einfach die Klammern!

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

Die Idee dahinter ist, dass eine Funktion einer Variablen ziemlich ähnlich ist. Anstatt zu schreiben

function ToBeCalled() { /* something */ }

du könntest genauso gut schreiben

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

Es gibt kleine Unterschiede zwischen den beiden, aber auf jeden Fall - beide sind gültige Möglichkeiten, eine Funktion zu definieren. Wenn Sie nun eine Funktion definieren und sie explizit einer Variablen zuweisen, erscheint es logisch, dass Sie sie als Parameter an eine andere Funktion übergeben können und keine Klammern benötigen:

anotherFunction(ToBeCalledVariable);
34
naivists

Es gibt einen Satz unter JavaScript-Programmierern: "Eval is Evil". Versuchen Sie also, ihn um jeden Preis zu vermeiden!

Zusätzlich zur Antwort von Steve Fenton können Sie Funktionen auch direkt übergeben.

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

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

Ich habe mir mit diesem Thema die Haare abgeschnitten. Ich konnte die obigen Beispiele nicht zum Laufen bringen, also endete ich wie folgt:

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

Und das funktioniert wie ein Zauber ... für das, was ich zumindest brauchte. Hoffe, es könnte einigen helfen.

6
Fenix Aoras

Ich schlage vor, die Parameter in ein Array einzufügen und sie dann mit der Funktion .apply() aufzuteilen. So können wir jetzt einfach eine Funktion mit vielen Parametern übergeben und auf einfache Weise ausführen.

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
6
Naramsim

Sie können auch eval() verwenden, um dasselbe zu tun.

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

Das ist es. Ich suchte auch nach dieser Lösung und versuchte Lösungen, die in anderen Antworten zur Verfügung gestellt wurden, aber schließlich erhielt es Arbeit von oben genanntem Beispiel.

6
NullPointer

Die anderen Antworten beschreiben hervorragend, was vor sich geht, aber ein wichtiges "gotcha" ist, sicherzustellen, dass alles, was Sie durchlaufen, tatsächlich eine Referenz auf eine Funktion ist.

Wenn Sie beispielsweise eine Zeichenfolge anstelle einer Funktion übergeben, wird eine Fehlermeldung ausgegeben:

function function1(my_function_parameter){
    my_function_parameter();   
}

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

function1(function2); //This will work

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

Siehe JsFiddle

2
Victor

In der Tat scheint ein bisschen kompliziert, ist es nicht.

methode als Parameter holen:

 function JS_method(_callBack) { 

           _callBack("called");  

        }

Sie können als Parametermethode angeben:

    JS_method(function (d) {
           //Finally this will work.
           alert(d)
    });
2
Hakkı Eser

Hier ist es ein anderer Ansatz:

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

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

Irgendwann, wenn Sie sich mit der Ereignisbehandlungsroutine auseinandersetzen müssen, um das Ereignis auch als Argument zu übergeben, reagieren die meisten modernen Bibliotheken, angular benötigen dies möglicherweise.

Ich muss die OnSubmit-Funktion (Funktion aus der Bibliothek eines Drittanbieters) mit einer benutzerdefinierten Validierung für reactjs überschreiben und habe die Funktion und das Ereignis wie unten beschrieben übergeben

URSPRÜNGLICH

    <button className="img-submit" type="button"  onClick=
 {onSubmit}>Upload Image</button>

NEUE FUNKTION GEMACHT upload und als Argumente übergeben onSubmit und Ereignis aufgerufen

<button className="img-submit" type="button"  onClick={this.upload.bind(this,event,onSubmit)}>Upload Image</button>

upload(event,fn){
  //custom codes are done here
  fn(event);
}
0
sumit