style.display 在数组排序后更改

Question

我想在排序前显示一条简单的加载消息，但排序后显示从 none 变为阻塞，即使我在之后调用排序。我什至尝试使用 setTimeout（2 秒）来更改显示，然后调用虚拟函数对内容进行排序。

function sort(i) {
    document.getElementById("loading").style.display = "block";
    array.sort(function(a, b) {
        return a[i].localeCompare(b[i]);
    });
}

Answer 1

当 JS 忙于工作时，浏览器不会急于重新绘制页面（假设可能会有其他 DOM 更改，它们应该一起批处理以重新绘制）。

您需要释放事件循环以允许在两个语句之间重新绘制。

将对 array.sort 的调用移动到函数中并在延迟后调用它（例如使用 setTimeout 或 requestAnimationFrame）。