CODEWITHSUNDEEP
javascriptcallback
haz
haz

Reputation: 780

javascript callback pattern using simple example

I've been unable to find a simple example of a javascript callback pattern for my purpose and an answer to the following question would be very helpful.

Supposing I've 2 functions which each display an alert:

function hello1() {
 setTimeout(function(){
    alert("hello1");
   }, 500); 
  } 

function hello2() {
 alert("hello2");
  }

if I'm using this function,

function saythehellos()
{
hello1();
hello2();
}

the alert "hello2" will display first followed by the alert "hello1"

How can I change the function saythehellos() using a callback pattern so that the alert "hello1" is displayed first followed by the alert "hello2"?

Upvotes: 2

Views: 256

Answers (4)

Paresh Barad
Paresh Barad

Reputation: 1609

As per quetion, you can define a callback pattern as per the following, define callback function as an argument.

function hello1(callback) {
  setTimeout(function(){
    alert("hello1");
    callback();
  }, 500); 
} 

function hello2() {
  alert("hello2");
}

hello1(hello2);

In ES6 a special syntax to work with promises in a more comfortable fashion, called async/await. It’s surprisingly easy to understand and use. you can also use it. In behind the scene, async/await work as callback

Edited as per request:

You can do it by the third function(saythehellos) as per the following chain.

function hello1(callback) {
  
 setTimeout(function(){
    alert("hello1");
    callback();
  }, 500); 
}

function hello2(callback) {
   alert("hello2");
   callback();
}

function saythehellos(callback) {
    hello1(function() {
        hello2(function() {
            callback();
        });
    });
}

saythehellos(function(){alert('all done')});

Upvotes: 2

Yogesh Dahiya
Yogesh Dahiya

Reputation: 159

Simple approach to achieve this:

function Hello1(){
   setTimeOut(onTimeOutRaise,500)
}

function onTimeOutRaise(){
  alert("Hello1");
  Hello2();
}
function Hello2(){
 alert("Hello2")
}

Here "onTimeOutRaise" itself a callback.

Upvotes: 0

Nick Parsons
Nick Parsons

Reputation: 50639

You could use ES7's async/await syntax with a promise. In your hello1() method you can return a promise which will alert() and then resolve to indicate that your hello1 method is complete. Then saythehellos() will wait for hello1() to resolve (as we are using the await keyword) and then it will continue to execute hello2(): 

function hello1() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      alert("hello1");
      resolve();
    }, 500);
  });

}

function hello2() {
  alert("hello2");
}


async function saythehellos() { // make async as we want to use await within this method
  await hello1();
  hello2();
}

saythehellos();

Alternatively, if you're looking for something a little more browser compatible, you can use the .then callback on the returned promise from hello1() (which is essentially what async/await is doing under the hood). The .then callback will be fired when the returned promise has resolved:

function hello1() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      alert("hello1");
      resolve();
    }, 500);
  });

}

function hello2() {
  alert("hello2");
}


function saythehellos() {
  hello1().then(function(result) {
    hello2();
  });
}

saythehellos();

Upvotes: 1

Nishant
Nishant

Reputation: 157

The simple callback way is:

function hello1(hello2Callback) {
   alert("hello1");
   hello2Callback && hello2Callback();
}

hello1(function() {
  alert("hello2");
});

I hope this will help you. The callback function is a function that is passed as an argument. So, when calling hello1(), I am passing a complete function definition. This argument is called callback function.

The Promise is a new efficient and clean way on handling callbacks. You can check Javascript Promise over Google.

Upvotes: 1

Related Questions