How to call async function inside a onClick (Button Click)-CodePudding

I am new to javascript and I am trying to create the following:

I have a search form for flights and after a user clicks Search, the user immediately gets the results.

I want to change this process. When a user fills the search form and clicks Search I want a POPUP screen to show with the Terms and conditions with a button "I understand". The results of the search will be shown only if the user clicks the button "I understand" in the POPUP.

I am trying to use await and async but I have no success still..

Here is the main code:

export function initSearchButtonOnClick() {
  $("#search-button").on("click", function (e) {
    activateLoadingOverlay2() // POPUP window Tearms & Condition


    // the code down needs to happen only after the user click the button "I understand" in the POPUP window.
    console.log("blerdii");

    e.preventDefault();
    switch (flightType) {
      case "rt":
      case "ow":
        if (
          $("#from-destination")[0].reportValidity() &&
          $("#to-destination")[0].reportValidity()
        ) {
          const fromDestination = $("#from-destination")
            .val() 
    More code below

CodePudding user response：

javascript is asynchrone and mono-thread. Forget about await and async.

From your popup HTML template, you have to bind a function when the user click on the button "I understand". That all.

Your function activateLoadingOverlay2() should register an event listener of the "I understand" button to do what you want.