javascript - 在长时间运行的函数中强制使用 jQuery 修改的立即 DOM 更新

Question

我有一个需要大约 2 秒才能执行的 javascript(复杂的优化算法)。我想在函数的开头将某些跨度设置为“工作...”。我观察到 span 在函数结束之前不会改变。

如何强制 DOM 更改传播？还是我应该一起以不同的方式处理这个问题？

我从按钮上的 onclick 调用该函数。

函数是这样的:

function optimize() {
    $('#status').text('working...');
    // calculate for 2 seconds
    $('#status').text('done!');
}

Answer 1

尝试将长时间运行的代码包装在 setTimeout 调用中:

function optimize() {
    $('#status').text('working...');
    window.setTimeout(function() {
        // calculate for 2 seconds
        $('#status').text('done!');
    }, 0);
}

这会为长时间运行的代码强制一个新的调用堆栈，从而允许在新调用堆栈开始执行之前完成重绘(更改文本)。