javascript callback pattern using simple example

Question

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"?

Have a look at '.then' -> stackoverflow.com/questions/49033694/… — khmub
– khmub, Commented Jun 19, 2019 at 5:54

Paresh Barad · Accepted Answer · 2019-06-19 06:49:02Z

2

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

edited Jun 19, 2019 at 6:49

answered Jun 19, 2019 at 6:08

Paresh Barad

1,60912 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

haz Over a year ago

thank you (and +1) but can I do this entirely within the "saythehellos()" function?

Nick Parsons · Accepted Answer · 2019-06-19 06:02:58Z

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

Nishant · Accepted Answer · 2019-06-19 05:59:23Z

1

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.

answered Jun 19, 2019 at 5:59

Nishant

16715 bronze badges

Comments

Yogesh Dahiya · Accepted Answer · 2019-06-19 06:15:22Z

0

Simple approach to achieve this:

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

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

Here "onTimeOutRaise" itself a callback.

edited Jun 19, 2019 at 6:15

answered Jun 19, 2019 at 6:02

Yogesh Dahiya

1598 bronze badges

Collectives™ on Stack Overflow

javascript callback pattern using simple example

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related