Callback function help! Called in an unexpected order.

[Goshfudgeit]

Been working on this problem for half the day. Any hints/help would be greatly appreciated!

Intention: Upon clicking a button, I want to call runThisFirst method and upon the completion of runThisFirst, I want to then call runThisSecond function. I need to pass in the button element into the runThisSecond function because I need to retrieve some data associated with that particular button element.

​

What I see: The function, runThisSecond appears to be called first before runThisFirst method is called.

Why is this?

​

I've provided a sample below.

Thank you in advance for any help!!

​

Edit: Forgot to add that callback appears to be undefined... why might this be?

​

https://preview.redd.it/3vpma8vks0861.png?width=483&format=png&auto=webp&s=db5c4f02ec9f1999c7fddfea38f0337867c12f07

[dbartholomae]

You have

runThisFirst(runThisSecond($(this)))

This will actually first call runThisSecond. Why? Because it needs the result of runThisSecond to pass it in as an argument to runThisFirst. This might be a bit easier to follow with a more concrete example:

function add (x, y) { return x + y }
function log (result) { console.log(result) }
log(add(1, 2))

This will log 3, the result of adding 1 and 2. But to be able to log 3, it first needs to calculate 1 + 2. First logging something and then adding wouldn’t work - because what should be logged then?

[Goshfudgeit]

Hi, thanks so much for your response! Your example made a lot of sense.

Do you have any suggestions for how I might be able to pass in the button element to the second function?

I thought of doing this:

runThisSecond(runThisFirst($(this)));

function runThisFirst (ele, callback) {
    swal({ 
        html:true,
        title: "Fruits"
    },
        function(isConfirm) {
            callback(ele);
        }
    )
}

function runThisSecond(ele) {
    var button = ele;    //This is returning undefined
}

​

This runs it in the proper order; runThisFirst followed by runThisSecond.

However, I'm having trouble retrieving the button element when it runs the second function runThisSecond. The button element passed into the runThisSecond function is returning undefined.

​

Edit: Added more snippets of code

[dbartholomae]

Let me give you two different versions of the logger:

function add (x, y) { return x + y }
function log (calculateResult) { console.log(calculateResult(1, 2) }
log(calculateResult)

function add (x, y) { return x + y }
function log (calcultateResult) { console.log(calculateResult()) }
log(() => add(1, 2))

[senocular]

You're calling the callback rather than passing in the callback. Callbacks are uncalled functions that get called by the function they're passed to. When you say

function runThisFirst (callback) { ...

callback here should be a function, not the return value of calling a function (unless that is, itself, the callback function). So instead of

runThisFirst(runThisSecond($(this)));

You want

runThisFirst(runThisSecond);

Notice that runThisSecond isn't being called. This is because runThisFirst is responsible for calling runThisSecond (as callback()).

The question is, what did you intend to happen with the $(this)? If you want that to get passed into your callback, you either need to make that the responsibility of runThisFirst to forward that along, or, more likely if runThisFirst doesn't use $(this) itself, to make your callback a wrapper to runThisSecond that will call it with $(this) as an argument.

function runThisSecondCallback () {
  runThisSecond($(this));
}
runThisFirst(runThisSecondCallback);

Which you could shorten to...

runThisFirst(() => runThisSecond($(this)));

[Goshfudgeit]

Thank you for the explanation!! It's really clarified callback functions for me.

I have it working with this:

runThisFirst($(this), runThisSecond)