waiting for dialog with selected option before running next function

Question

I have a dialog that includes a select list with different options that provide parameters for a function to create a map that runs on a button click (also in the dialog) after selection is made. Depending on the value of the select option, another dialog may need to be launched to specify additional parameters. There are different dialogs for these parameters depending on the choice. I have enabled the user to select multiple options at once, but am having difficulty in getting the code to run in the order I want. Essentially I want to loop through each option, and launch dialogs as appropriate, but have each dialog run one at a time and the next would open only when the prior dialog closes. I could run the button click function on the the close button of the preceeding dialogs, but in some cases, there are no preceeding dialogs, if the select option does not require it. What is the best way to accomplish what I am trying to do? Below is the ajax request that loops through the selected options, runs the additional dialog function (if required) and then the function that runs the map. I've also included below the additional dialog function that gets called first. Any guidance would be most appreciated.

$('#map_dialog').dialog({
            autoOpen: false,
            title: 'Create Map',
            closeOnEscape: true,
            height: 'auto',
            width: 'auto',
            buttons: [{
                text: "Create Map",
                id: 'create_map',
                click: function () {
                    console.log($('#map_choice').val());
                    $('#map_choice').val().forEach(m => {
                        pick_choice(m);
                        gen_map(map, map_name, m, map_features, map_key_array, map_state_array, map_county_array, map_geom_array, select_choice, drawSource_feats);
                    });
                }
            }, {
                text: "Cancel",
                id: 'cancel_map',
                click: hide_map_dialog
            }
            ],
            open: function (event, ui) {
                $(".ui-dialog-titlebar-close", ui.dialog | ui).hide();
            }
        });

 const pick_choice = function (choice) {
            if (choice == 'Land Ownership') {
                if (drawSource_feats.length == 0) {
                    choose_labels();
                }
                else {
                    toastr.warning('You must select parcel(s) in order to create this map.');
                    hide_map_dialog();
                }
            }
            else if (choice == 'GUDA') {
                choose_geom();
            }
            else if (choice == 'Land Rights') {
                land_status_dict = {};
                specify_land_status(map);
            }
        };

Answer 1

Try to wrap dialog call into async function. So, it'll be possible to make an array of these functions and call them one by one.

Something like this:

async function dialog(args) {
  return new Promise((resolve, reject) => {
    $('...').dialog({
      // ...
      onClose: () => resolve(),
      // ...
    })
  })
}

// Schedule the queue
const dialogs = []
// ...
dialogs.push(args1, args2, ...)

// Sequentially calling
async function callAll() {
  for (let i = 0; i < dialogs.length; i++) {
    await dialog(dialogs[i])
  }
}