Trying to understand a callback function

Question

I am trying to understand why my function is being executed before I get to the callback of my openModal script. I am fairly new to javascript but the understanding I had is that when you pass a function, it will execute when called (i.e., my callback() function in the openModal function). I've looked at a number of other examples and it appears I have the correct structure but I must be missing something. Any guidance here would be helpful.

Order of events when calling openModal

List item
executes callback function
closes other modals
opens the current modal
does nothing because the callback function is undefined (why is it undefined?)

Shouldn't the events unfold like this

closes other modals
opens the current modal
executes callback function

Any guidance here is appreciated.

<script>
function openModal(modal, callback) {
    let modalCollection = document.getElementsByClassName(`modal`)
    if (modalCollection) {
        for (let index = 0; index < modalCollection.length; index++) {
            closeModal(modalCollection[index]);
        }
    }
    if (modal) {
        modal.style.display = `block`;
    }
    if (callback) {
        callback();
    }
}
</script>

openModal(modalContactDelete, openModalContactDeleteCallback(${element.ContactId}))

`openModalContactDeleteCallback(${element.ContactId})` is an immediate call to the callback function. It's called before `openModal()` is even invoked. A function name followed by a parenthesized argument list is a function call. — Pointy, Jun 21 '19 at 12:51
When you do `openModalContactDeleteCallback(${element.ContactId})` you are *executing* the function, not passing a reference to it that will be executed later. — VLAZ, Jun 21 '19 at 12:51
@Pointy do we have some sort of canonical for this? It feels like there should be - it shows up way too much. I think this is the fourth I saw *today*. — VLAZ, Jun 21 '19 at 12:52
@VLAZ I'm sure I've seen it tons, but my google-fu is weak today. — Amadan, Jun 21 '19 at 12:53
Possible duplicate of [Calling functions with setTimeout()](https://stackoverflow.com/questions/3800512/calling-functions-with-settimeout) — VLAZ, Jun 21 '19 at 12:53
Not a perfect dupe but I found it through [setTimeout — callback executed immediately?](https://stackoverflow.com/questions/8462381/settimeout-callback-executed-immediately) — VLAZ, Jun 21 '19 at 12:54

score 2 · Accepted Answer · answered Jun 21 '19 at 12:51

2

It's invoked because you invoke it by ()

You can try the following:

openModal(modalContactDelete, () => {
  openModalContactDeleteCallback(element.ContactId)
})

By that why, the callback will be an anonymous function, within it, you call your openModalContactDeleteCallback

answered Jun 21 '19 at 12:51

Radonirina Maminiaina

6,958
4
33
60

Ah, I knew it had to be something simple. So I guess my confusion is here, could I technically call `openModal(modalContactDelete, () => { openModalContactDeleteCallback(element.contactId) }, openModalContactDeleteCallback(elementContactId) )` and it would not only execute immediately but on callback? – Volearix Jun 21 '19 at 12:55
1

Yes, you can try it out. `openModalContactDeleteCallback` will be excecuted on your callback. – Radonirina Maminiaina Jun 21 '19 at 12:58
Okay, I think this is just a tad confusing for me (coming from C#). So methods aren't more on the dynamically defined side? I guess I just need to do more reading. – Volearix Jun 21 '19 at 13:18

Trying to understand a callback function

1 Answers1