javascript обновить модальный элемент формы, пока пользовательский интерфейс заблокирован из-за выполнения кода

Question

хорошо, я видел много, много статей об этом. Но пока у меня нет работы. Так что это мой взгляд на проблему.

У меня есть список имен сотрудников с идентификаторами, хранящимися в опции выбора, и кнопка, при нажатии которой вызывается процедура для каждой опции в выборе

$(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);
});

Это вызывает функцию вызовите doWork, который определен как async / wait

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

}

, который в свою очередь вызывает следующую функцию:

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');                    }
            });
        });
    }

Хотя этот код работает, элемент $ ("# modalInfo-body span ") не обновляется, так как он выполняет функцию doWork.

У меня уже есть счетчик на экране, но я ищу более наглядное пособие о том, как это происходит.

Answer 1

Хорошо, я собираюсь начать с того, что я знал, что браузер однопоточный, и это было непросто.

Я пробовал обратные вызовы, и это не сработало полностью, так как я столкнулся с задержкой при обновлении экрана.

Итак, в конечном итоге я заменил это простым вращателем.

Спасибо всем, кто потратил на это таймер.