Comprendere meglio le funzioni di callback in JavaScript

Comprendo il passaggio di una funzione a un'altra funzione come callback e la sua esecuzione, ma non capisco la migliore implementazione per farlo. Sto cercando un esempio molto semplice, come questo:

var myCallBackExample = {
    myFirstFunction : function( param1, param2, callback ) {
        // Do something with param1 and param2.
        if ( arguments.length == 3 ) {
            // Execute callback function.
            // What is the "best" way to do this?
        }
    },
    mySecondFunction : function() {
        myFirstFunction( false, true, function() {
            // When this anonymous function is called, execute it.
        });
    }
};

In myFirstFunction, se restituisco un nuovo callback (), allora funziona ed esegue la funzione anonima, ma non mi sembra l'approccio corretto.

Puoi solo dire

callback();

In alternativa, è possibile utilizzare il callmetodo se si desidera regolare il valore thisall'interno del callback.

callback.call( newValueForThis);

All'interno della funzione ci thissarebbe qualunque cosa newValueForThissia.

È necessario verificare se il callback esiste ed è una funzione eseguibile:

if (callback && typeof(callback) === "function") {
    // execute the callback, passing parameters as necessary
    callback();
}

Molte librerie (jQuery, dojo, ecc.) Usano un modello simile per le loro funzioni asincrone, così come node.js per tutte le funzioni asincrone (di solito nodejs passa errore dataal callback). Analizzare il loro codice sorgente sarebbe di aiuto!

Esistono 3 possibilità principali per eseguire una funzione:

var callback = function(x, y) {
    // "this" may be different depending how you call the function
    alert(this);
};

1. callback (argomento_1, argomento_2);
2. callback.call (some_object, argomento_1, argomento_2);
3. callback.apply (some_object, [argomento_1, argomento_2]);

Il metodo scelto dipende se:

1. Gli argomenti sono archiviati in una matrice o come variabili distinte.
2. Vuoi chiamare quella funzione nel contesto di qualche oggetto. In questo caso, l'utilizzo della parola chiave "this" in quel callback farebbe riferimento all'oggetto passato come argomento in call () o apply (). Se non si desidera passare il contesto dell'oggetto, utilizzare null o non definito. In quest'ultimo caso l'oggetto globale verrebbe utilizzato per "questo".

Documenti per Function.call , Function.apply

I callback riguardano i segnali e "new" riguarda la creazione di istanze di oggetti.

In questo caso sarebbe ancora più appropriato eseguire solo "callback ();" di "return new callback ()" perché non stai facendo nulla con un valore di ritorno comunque.

(E il test argomenti.length == 3 è davvero goffo, prima di tutto, è meglio controllare che esista il parametro callback ed è una funzione.)

la corretta attuazione sarebbe:

if( callback ) callback();

questo rende facoltativo il parametro callback.

Puoi usare:

if (callback && typeof(callback) === "function") {
    callback();
}

L'esempio seguente è un po 'più completo:

function mySandwich(param1, param2, callback) {
  alert('Started eating my sandwich.\n\nIt has: ' + param1 + ', ' + param2);
  var sandwich = {
      toppings: [param1, param2]
    },
    madeCorrectly = (typeof(param1) === "string" && typeof(param2) === "string") ? true : false;
  if (callback && typeof(callback) === "function") {
    callback.apply(sandwich, [madeCorrectly]);
  }
}

mySandwich('ham', 'cheese', function(correct) {
  if (correct) {
    alert("Finished eating my " + this.toppings[0] + " and " + this.toppings[1] + " sandwich.");
  } else {
    alert("Gross!  Why would I eat a " + this.toppings[0] + " and " + this.toppings[1] + " sandwich?");
  }
});

Ecco un esempio di base che spiega la callback()funzione in JavaScript:

var x = 0;

function testCallBack(param1, param2, callback) {
  alert('param1= ' + param1 + ', param2= ' + param2 + ' X=' + x);
  if (callback && typeof(callback) === "function") {
    x += 1;
    alert("Calla Back x= " + x);
    x += 1;
    callback();
  }
}

testCallBack('ham', 'cheese', function() {
  alert("Function X= " + x);
});

JSFiddle