Question

此方案的最佳做法是什么： 1）用户点击“排序巨大的javascript数组” 2）浏览器通过element.innerHTML =“Sorting”显示“Sorting ...” 3）浏览器在显示“Sorting ...”消息时对巨大的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;
}

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

感谢您的建议。

Answer 1

您必须将控制权返回给浏览器才能让它在屏幕上更新任何更改。使用超时要求它将控制权交还给您。

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

但是，执行“几秒钟”的脚本有点可疑。应该有一种方法可以加快速度，或者将进程分解为部分返回控制，每隔一段时间就会超时一次，以保持页面的响应。

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

1 个答案: