在 javascript 排序调用之前强制更新 element.innerHTML

这种情况的最佳实践是什么： 1）用户点击“对巨大的javascript数组进行排序” 2）浏览器通过element.innerHTML =“Sorting”显示“Sorting...” 3) 浏览器对巨大的 javascript 数组进行排序（100% CPU 持续几秒钟），同时显示“正在排序...”消息。 4) 浏览器显示结果。

伪代码：

...
<a href="#" onclick="sortHugeArray();return false">Sort huge array</a>
...
function sortHugeArray(){
  document.getElementById("progress").innerHTML="Sorting...";
  ...do huge sort ...
  ...render result...
  document.getElementById("progress").innerHTML=result;
}

当我这样做时，浏览器永远不会显示“排序...”，它会冻结浏览器几秒钟并显示结果，而不会注意到用户...

谢谢你的建议。

您必须将控制权返回给浏览器，以使其更新屏幕上的任何更改。使用超时来要求它将控制权返回给您。

function sortHugeArray(){
    document.getElementById("progress").innerHTML="Sorting...";
    setTimeout(function() {
        ...do huge sort ...
        ...render result...
        document.getElementById("progress").innerHTML=result;
    }, 0);
}

不过，执行脚本“几秒钟”有点问题。应该有一种方法可以加快速度，或者将过程分成几个部分，每隔一段时间就返回控制权，以保持页面的响应能力。