Erstellen eines benutzerdefinierten Rückrufs in JavaScript

Question

Alles, was ich tun muss, ist, eine Callback-Funktion auszuführen, wenn meine aktuelle Funktionsausführung endet.

function LoadData() 
{
    alert('The data has been loaded');
    //Call my callback with parameters. For example,
    //callback(loadedData , currentObject);
}

Ein Verbraucher für diese Funktion sollte folgendermaßen aussehen:

object.LoadData(success);

function success(loadedData , currentObject) 
{
  //Todo: some action here 
}

Wie kann ich das umsetzen?

Answer 1

Einige der Antworten, die zwar richtig sind, sind vielleicht etwas schwierig zu verstehen. Hier ist ein Beispiel für den Laien:

var users = ["Sam", "Ellie", "Bernie"];

function addUser(username, callback)
{
    setTimeout(function()
    {
        users.push(username);
        callback();
    }, 200);
}

function getUsers()
{
    setTimeout(function()
    {
        console.log(users);
    }, 100);
}

addUser("Jake", getUsers);

Der Callback bedeutet, dass "Jake" immer zu den Benutzern hinzugefügt wird, bevor die Liste der Benutzer mit console.log .

Quelle (YouTube)

Answer 2

Wenn Sie eine Funktion ausführen wollen, wenn etwas erledigt ist. Eine gute Lösung ist es, auf Ereignisse zu hören. Ich werde zum Beispiel eine Dispatcher , a DispatcherEvent Klasse mit ES6, dann:

let Notification = new Dispatcher()
Notification.on('Load data success', loadSuccessCallback)

const loadSuccessCallback = (data) =>{
   ...
}
//trigger a event whenever you got data by
Notification.dispatch('Load data success')

Dispatcher:

class Dispatcher{
  constructor(){
    this.events = {}
  }

  dispatch(eventName, data){
    const event = this.events[eventName]
    if(event){
      event.fire(data)
    }
  }

  //start listen event
  on(eventName, callback){
    let event = this.events[eventName]
    if(!event){
      event = new DispatcherEvent(eventName)
      this.events[eventName] = event
    }
    event.registerCallback(callback)
  }

  //stop listen event
  off(eventName, callback){
    const event = this.events[eventName]
    if(event){
      delete this.events[eventName]
    }
  }
}

DispatcherEreignis:

class DispatcherEvent{
  constructor(eventName){
    this.eventName = eventName
    this.callbacks = []
  }

  registerCallback(callback){
    this.callbacks.push(callback)
  }

  fire(data){
    this.callbacks.forEach((callback=>{
      callback(data)
    }))
  }
}

Viel Spaß beim Codieren!

p/s: Mein Code fehlt behandeln einige Fehler Ausnahmen

Answer 3

Beim Aufruf der Callback-Funktion könnten wir sie wie folgt verwenden:

consumingFunction(callbackFunctionName)

Beispiel:

// Callback function only know the action,
// but don't know what's the data.
function callbackFunction(unknown) {
  console.log(unknown);
}

// This is a consuming function.
function getInfo(thenCallback) {
  // When we define the function we only know the data but not
  // the action. The action will be deferred until excecuting.
  var info = 'I know now';
  if (typeof thenCallback === 'function') {
    thenCallback(info);    
  }
}

// Start.
getInfo(callbackFunction); // I know now

Dies ist die Codepend mit vollständigem Beispiel.

Answer 4

function LoadData(callback) 
{
    alert('the data have been loaded');
    callback(loadedData, currentObject);
}

Answer 5

     function login(email, password, callback) {
         //verify the user
         const users = [
          { email: "abc@gmail.com", password: "123" },
          { email: "xyz@gmail.com", password: "xyz" }
         ];

         const user = users.find(
           (user) => user.email === email && user.password === password
         );
         callback(user);
       `enter code here`}

    function redirect(user) {
       if (user) {
          //user is successfully logged in
          console.log("user is successfully logged in ");
       } else {
         console.log("Incorrect credentials ");
       } 
    }

    login("abc@gmail.com", "123", redirect);

Ich hoffe, dieses Beispiel hilft allen, die etwas über den Rückruf in JS wissen wollen