On click of button call consecutive dependent and independent function in flask?

Question

I don't know what approach should I follow to get the desired result in the Flask. In Flask app,

1. On click of a button call a function and print the output in the UI
2. The output of f1 is used as input to f2, the print the output in the UI.
3. Again, f3 is called, which independent function and print the output in the UI.
4. After completion of f3, after few minutes a pop window should appear on the screen. Please help me.

Answer 1

Well, basically you already answered the question yourself.

You should create an event listener for the button, and then do one step after another.

document.getElementById("myBtn").addEventListener("click", function(){
  const result = //call to flask endpoint
  document.getElementById("spot_one").innerHTML = result;
  const second_result = //call to another flask endpoint
  document.getElementById("spot_two").innerHTML = second_result;
  await new Promise(r => setTimeout(r, 20000));
  window.alert("sometext");
});

Please try these steps one by one.

If you want to read more about the "wait" magic, please read this other StackOverFlow answer:

What is the JavaScript version of sleep()?