javascript - Javascript 中的奇怪行为；计算时不显示div

Question

我正在对几个音频文件进行一些相当处理器繁重的处理。在进入这个名为 startProcessing 的函数之前，我想显示一个覆盖整个页面的 div 并表示正在计算...问题是 div 仅在函数终止后显示。当我单击激活 tis 代码的按钮时，按钮卡住，只有当进程功能终止时，它才会解冻并显示加载程序。任何人都看到过类似的行为并能够解决它吗？

document.getElementById('loader').innerHTML = "<p>Calculating...</p><p>Please Wait</p><img src='../img/loader.gif' />";
document.getElementById('loader').style.visibility = "visible";
document.getElementById('notification').style.visibility = "visible";

var speed = document.getElementById("playbackSpeed").value/100;


    console.log("Changing speed");
    if (speed > 1.5){
        startProcessing(1.5);   
        backend.playbackSpeed = 1.5;
    } else if (speed < 0.75){
        startProcessing(0.75);
        backend.playbackSpeed = 0.75;
    } else {
        startProcessing(speed);
        backend.playbackSpeed = speed;
    }   

Answer 1

您可以将繁重的处理放入 Web Worker 中.这将释放您的 UI。

注意:它对 IE 不友好...只有 IE10(我认为)