CODEWITHSUNDEEP
javascriptcallback
Cuckoo
Cuckoo

Reputation: 366

How do I turn this into a callback function?

I'm new to Javascript, and callbacks are blowing my mind a little at the moment. How do I turn the teletyperDiologue function into a callback? The main reason is I want the teletyper to finish it's job before the displayOut function finishes. Thank you in advance for your help. 

function displayOut() {
	
	// images
	document.getElementById("imgBox").style.backgroundImage = "url(" + db.rooms[roomLoc].roomImg + ")";
	// Diologue box
	diologueBox.innerHTML = ""; // Clear Box
	teleTyperDiologue(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;
			})()
		+ ".");
};


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

Upvotes: 2

Views: 93

Answers (2)

edi
edi

Reputation: 937

As an example:

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

in your case:

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

Upvotes: 3

Dan Weber
Dan Weber

Reputation: 1237

You can pass functions around like variables and return them in functions and use them in other functions. So, when you pass a callback function as an argument to another function, you only need to pass the function definition.

See example below.

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

Upvotes: 2

Related Questions