CODEWITHSUNDEEP
javascript
Giala Jefferson
Giala Jefferson

Reputation: 1929

javascript callback confusion between multiple functions

function A(){
   b()
   c()
}

Function c has to be called after function b. I know there's a concept in JavaScript called callback.

How do I do it in function b?

function b(cb){
//I can't put function c here, because this of c is bound to somewhere and I don't want to mess up.
}

Upvotes: 0

Views: 236

Answers (6)

zhirzh
zhirzh

Reputation: 3449

c() will always be called after b() because you placed it there.

The real question is whether or not c() will be called before b() is finished.

If b() is not an async function, then your code is perfect. c() will be called once b() is finished.

function A(){
    b(); // *not* async
    c();
}

However, if b() is async in nature, you need to provide c() as a callback. function A(){ b(c); // async }

function b(cb){
    // ...
    cb(); // cb() doesn't need "this"
}

Since c() is a bound method, you need to also pass the context (this) to b().

function A(){
    /* extract and save context, somehow */
    b(c, context); // async
}

function b(cb, context){
    // ...
    cb.call(context); // cb() doesn't need "this"
}

I don't want to mess up.

If you don't want to play with context passing, you can use a Promise.

function A(){
    b().then(function() {
        // run "c()" only when "b()" is finished and there were no errors
        c();
    });
}

function b(){
    // ...
    // "b()" is *not* async
    return Promise.resolve();
}

function b(){
    // ...
    // "b()" is async
    var whenDone = new Promise(function(resolve, reject) {
        performAsyncTask(resolve);
    })
    return whenDone;
}

But wait, there's more.

If you want bleeding edge tech, you can always use async/await

async function A(){
    await b(); // VOILA! it's that easy
    c();
}

These are the general basic strategies. Of course, you can try to mix-n-match them or try to figure out something new that suits your needs.

Upvotes: 1

Antoine Trouve
Antoine Trouve

Reputation: 1273

Your question is not very clear, let me try to decipher.

If you execute

function A() { b(); c() }
function b() { /* b work */ }
function c() { /* c work */}

Then c will be called after b if by is synchronous.

In the case b is asynchronous, c will be called before b completes. Then you need indeed a callback as a parameter of b:

function A() { b(c) }
function b(callback) { /* b work */ ; callback() }
function c() { /* c work */ }

Yet in modern js, you'd rather use a promise:

function A() {
  b().then( function() {
    c()
  } )
}
function b() {
  return new Promise( function(resolve, reject) {
    /* b work */
  } )
}
function c() { /* c work */ }

Upvotes: 0

João Silva
João Silva

Reputation: 114

Callbacks in JavaScript are functions that are passed as arguments to other functions. This is a very important feature of asynchronous programming, and it enables the function that receives the callback to call our code when it finishes a long task, while allowing us to continue the execution of the code.

var callback = function() {
    console.log("Done!");
}

setTimeout(callback, 5000);

As you can see, setTimeout receives a function as a parameter, this is a callback!

In your case you can do the following:

function b(c) {
    c();
}

// calling function b and sending as a parameter an anonymous function
// that will be replaced by the "c" parameter in the "b" function
b(function() {
    console.log("inside c");
});

This is almost a closure, just with a little bit more tweaking and you can turn it into one.

Upvotes: 0

Amir H. Bagheri
Amir H. Bagheri

Reputation: 1426

Your understanding is correct. The notion of the callback is when a function is complete. What you're going to have to do is to ensure that the type of input and make sure it is a function and not something different. Take a look at the following example:

function A()
{
    alert('I am A function');
    b(c);
}

function b(cb)
{
    alert('I am "b" function');
    
    
    /// At the very end, put this code:    
    if (typeof(cb)==='function')
    {
         cb();
    }
}

function c()
{
    alert('I am "c" function');
}



A();

Upvotes: 0

user3151814
user3151814

Reputation: 

function b(c){
    doSomething();
    c();
}

function a(){
    b(c);
}

Upvotes: 0

Dave L
Dave L

Reputation: 984

You can either use Promises or a callback.

In this case I'd use a callback (as it's a simple use case & promises require crossbrowser checks).

function A() {
    b(c); // Pass the function 'c'
}

function c() {
    // Do something else
}

function b(callback) {
    // Do something

    // Run callback
    callback(); // This will run whatever method you passed in
}

Upvotes: 1

Related Questions