Wie kann ich dies in eine Callback-Funktion umwandeln?

Question

Ich bin neu in Javascript, und Callbacks sind im Moment ein wenig blowing. Wie kann ich die Funktion teletyperDiologue in einen Rückruf umwandeln? Der Hauptgrund ist, dass ich möchte, dass der Teletyper seinen Job beendet, bevor die displayOut-Funktion beendet wird. Vielen Dank im Voraus für Ihre Hilfe.

function displayOut() { 
 
\t 
 
\t // images 
 
\t document.getElementById("imgBox").style.backgroundImage = "url(" + db.rooms[roomLoc].roomImg + ")"; 
 
\t // Diologue box 
 
\t diologueBox.innerHTML = ""; // Clear Box 
 
\t teleTyperDiologue(db.rooms[roomLoc].description + 
 
\t \t " The room contains: " + 
 
\t \t \t (function() { 
 
\t \t \t \t let x = ""; 
 
\t \t \t \t for (let i = 0; i < db.items.length; i++) { 
 
\t \t \t \t \t if (db.items[i].location === roomLoc && db.items[i].hidden === false) { 
 
\t \t \t \t \t \t x += db.items[i].name + ", " 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 
\t \t \t \t x = x.slice(0, x.length -2); 
 
\t \t \t \t if (x === "") { 
 
\t \t \t \t \t x = " nothing of special interest"; 
 
\t \t \t \t } 
 
\t \t \t \t return x; 
 
\t \t \t })() 
 
\t \t + "."); 
 
}; 
 

 

 
// Teletyper for Diologue Box 
 
function teleTyperDiologue(string) { 
 
\t for (let i = 0; i < string.length; i++) { 
 
\t \t setTimeout(function() { 
 
\t \t \t diologueBox.innerHTML += string.slice(i, i + 1); 
 
\t \t }, 5 * i); 
 
\t } 
 
}

Answer 1

Als Beispiel:

function test(a) { a(); } 
function x() { alert('hello'); } 
test(x); 

in Ihrem Fall:

function displayOut(callback) { 

    // images 
    document.getElementById("imgBox").style.backgroundImage = "url(" + db.rooms[roomLoc].roomImg + ")"; 
    // Diologue box 
    diologueBox.innerHTML = ""; // Clear Box 
    callback(db.rooms[roomLoc].description + 
    " The room contains: " + 
     (function() { 
     let x = ""; 
     for (let i = 0; i < db.items.length; i++) { 
      if (db.items[i].location === roomLoc && db.items[i].hidden === false) { 
      x += db.items[i].name + ", " 
      } 
     } 
     x = x.slice(0, x.length -2); 
     if (x === "") { 
      x = " nothing of special interest"; 
     } 
     return x; 
     })() 
    + "."); 
}; 

displayOut(teleTyperDiologue); 

Answer 2

Sie Funktionen um wie Variablen passieren können und sie in Funktionen geben und sie benutzen in anderen Funktionen. Wenn Sie also eine Callback-Funktion als Argument an eine andere Funktion übergeben, müssen Sie nur die Funktionsdefinition übergeben.

Siehe Beispiel unten.

function displayOut() { 
 
    console.log("Display Out running..."); 
 
} 
 

 
function teleTyperDiologue(stringParam, callback) { 
 
    console.log("Running teleTyper with string param passed of: ", stringParam); 
 
    callback(); 
 
} 
 

 
teleTyperDiologue ("Test string", displayOut);