javascript update modal form element whilst the ui is blocked due to code execution

Question

ok, I have seen many, many articles about this. But so far I have not got any to work. So this is my take on the issue.

I have a list of employee names with ids held in a select option, and a button that when clicked, calls a routine for each option in the select

$(document).on("click", ".js-button-update-all-drivers", function (e) {
    e.preventDefault();
    myApplication.busy(true);
    $("#modalInfo-body span").text("Starting update ...........");
    $('.modalInfo-header .title').text("Information");
    var modal = document.getElementById('modalInfo');
    myApplication.openModal(modal);

    var selected = document.getElementsByClassName('js-dropdown-selector');

    for (var i = 0; i < selected[0].options.length; i++) {
        var Id = selected[0].options[i].value;
        $("#modalInfo-body span").text("Updating - " + Id);

        doWork(Id);

    }
    myApplication.closeModal(modal);
    myApplication.busy(false);
});

This calls a function call doWork which is defined as async/wait

async function doWork(employeeId, taxWeek, taxYear) {
    try {
          const response = await processUpdate(Id);        
    } catch (err) {
          $("#modalInfo-body span").text("Report Error - Thank you.");
    } 

}

Which in turn calls the following function:

function processUpdate(Id) {
        return new Promise((resolve, reject) => {
            $.ajax({
                url: '/myTest',
                async: false,
                data: {
                    Id: Id
                },
                method: 'post',
                dataType: 'json',
                success: function(retData) {
                    if (retData === false) {
                        resolve('Completed');
                    } else {
                        reject('An error has occurred, please send a screen shot');
                    }
                },
                error: function(xhr, error) {
                    reject('An error has occurred, please send a screen shot');                    }
            });
        });
    }

Although this code works, the element $("#modalInfo-body span") is not updated as it loops around the doWork function.

I already have a spinner on the screen, but am looking for a more visual aid to how this is progressing.

Answer 1

OK, I am going to start this by saying that I knew the browser is single threaded, and this was not going to be easy.

I did try callbacks and that did not work completely, as I encountered a delay in updating the screen.

So ultimately, I replaced this with a simple spinner.

Thanks to all that took the timer to look at this.