Prevent remainder of function from executing until click event is finished

Question

Been struggling with this one for a while for a game. I have an outer function that declares two variables as functions, and then puts those into a function that creates a modal. The user will be able to click on one of the two inner functions in the modal, but not both. Once they've clicked, a new event listener is created (via the inner function they chose), and they click somewhere else on the webpage to do their action.

The inner functions do different things but for the sake of this example I made them the same.

What I'm trying to achieve is for the last part of outer to not trigger until one of the event listeners of the inner function is finished.

function inner1(a,b){

$(a).on("click", function() {

console.log("b");

}

function inner2(c,d){

$(c).on("click", function() {

console.log("d");

}



function outer(){

let x = function() {inner1(a,b)};
let y = function() {inner2(c,d)};

createModal{x,y} //creates a modal with some CSS, binding x and y to two buttons

afterEvent(); // want to trigger this AFTER createModal has created the modal AND after the user has clicked on the modal AND has clicked on the event listener.
}

outer() //--> outer executes when the user clicks on "start"

For context, the modal might offer a choice "increase money" or "increase points". If they select "increase money" a new event lister is created on the "money" area of the webpage, and when they click on it the money comes up. I simplified the functions for the sake of this example, but that's why the inner functions create another event listener - the user must input in order for them to run.

Additionally, the afterEvent() and inner1() and inner2() will be mixed-and-matched (hence the createModal function to build it) so I can't just put afterEvent() inside of inner1() and inner2() .

I've messed around with promises, return, the frowned-upon global variable, and for loops and while loops and haven't been able to produce what i need just yet. Hoping someone can shed some light.

How the user will perceive this:

"ok, i clicked on start and a modal just popped up, offering me to increase my money if I click on the cow, or increase my points if I click on the pig. No matter which I choose, AFTER I've done that action, a new card will randomly be drawn for me. ok...here we go. I'll click on the first option of the modal. Hey know the cow has an outline and can be clicked, I clicked it, increased my money. and now a card was drawn for me."

Answer 1

something like this?

function inner1(a,b, fn){

$(a).on("click", function() {

console.log("b");
fn();

}

function inner2(c,d, fn){

$(c).on("click", function() {

console.log("d");
fn();

}



function outer(){

let fn = () => afterEvent(); // want to trigger this AFTER createModal has created the modal AND after the user has clicked on the modal AND has clicked on the event listener.
let x = function() {inner1(a,b, fn)};
let y = function() {inner2(c,d, fn)};

createModal{x,y} //creates a modal with some CSS, binding x and y to two buttons

}

outer() //--> outer executes when the user clicks on "start"