Tengo un cuadro de diálogo que incluye una lista de selección con diferentes opciones que proporcionan parámetros para una función para crear un mapa que se ejecuta al hacer clic en un botón (también en el cuadro de diálogo) después de realizar la selección. Según el valor de la opción de selección, es posible que sea necesario iniciar otro cuadro de diálogo para especificar parámetros adicionales. Hay diferentes diálogos para estos parámetros dependiendo de la elección. He permitido que el usuario seleccione varias opciones a la vez, pero tengo dificultades para que el código se ejecute en el orden que quiero. Esencialmente, quiero recorrer cada opción e iniciar cuadros de diálogo según corresponda, pero hacer que cada cuadro de diálogo se ejecute uno a la vez y que el siguiente se abra solo cuando se cierre el cuadro de diálogo anterior. Podría ejecutar la función de clic de botón en el botón de cierre de los cuadros de diálogo anteriores, pero en algunos casos, no hay cuadros de diálogo anteriores, si la opción de selección no lo requiere. ¿Cuál es la mejor manera de lograr lo que estoy tratando de hacer? A continuación se muestra la solicitud ajax que recorre las opciones seleccionadas, ejecuta la función de diálogo adicional (si es necesario) y luego la función que ejecuta el mapa. También he incluido a continuación la función de diálogo adicional que se llama primero. Cualquier orientación sería muy apreciada.
$('#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); } };Intente envolver la llamada de diálogo en la función async . Entonces, será posible hacer una matriz de estas funciones y llamarlas una por una.
Algo como esto:
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]) } }