在 function 内：防止后面的 function 执行，直到前面的功能（使用用户输入）完成

Question

I am creating a game to practice JS and would like to be able to restrict a function from executing until earlier parts of the function are done. I'm creating a modal with 2 pre-built functions fed to two buttons, and then after one of the buttons is pressed and the button's function is finished, THEN the later function can go.

Here are some general examples:

functionX() {/*manipulate the DOM based on user input*/}
functionY() {/*manipulate the DOM based on user input*/}
functionZ() {/*changes DOM based on results of functionX or functionY*/}
    
functionChoice(x,y){

    //create a modal with 2 buttons, one for function x and function y
   
    //buttons have functionX or functionY bound to them

    buttonX.on("click",function() {x()})
    buttonY.on("click",function() {y()})
    
    function Z();// this is the function I want to restrict until the user has clicked on, and finished, either x() or y()
}

functionChoice(functionX(), functionY());

Many functions (X and Y) in the game become part of the modal, and could be followed by different kinds of functionZ s, so it's not practical to move functionZ into X and Y as part of their execution.

I have messed around with promises and still can't seem to get it to work exactly how I need, and I think that's because the promise still doesn't care whether functionX or functionY is done, it just cares that they've been executed.

Answer 1

could call functionZ within each click handler:

buttonX.on("click",function() {x(); functionZ()})
buttonY.on("click",function() {y(); functionZ()})

or if you want this behavior to only be available once, wrap the click handlers in a promise and call functionZ after it resolves:

var promise = new Promise(function (resolve) {
  buttonX.on("click",function() {x(); resolve()})
  buttonY.on("click",function() {y(); resolve()})
}

promise.then(functionZ)

this is assuming x and y are synchronous