javascript 更新模态表单元素，而 ui 由于代码执行而被阻止

Question

好的，我看过很多很多关于这个的文章。但到目前为止，我还没有任何工作。所以这是我对这个问题的看法。

我在 select 选项中有一个包含 ID 的员工姓名列表，以及一个按钮，单击该按钮时，会为 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);
});

这会调用定义为 async/wait

的函数调用 doWork

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

好的，我要开始说我知道浏览器是单线程的，这并不容易。

我确实尝试了回调，但没有完全奏效，因为我在更新屏幕时遇到了延迟。

所以最终，我用一个简单的微调器代替了它。

感谢所有花时间来看这个的人。

javascript 更新模态表单元素，而 ui 由于代码执行而被阻止

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

javascript

jquery

es6-promise