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。这将释放你的用户界面。

注意：它不是IE友好...只有IE10（我认为）

Answer 2

尝试以一些延迟运行繁重的计算：

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


    console.log("Changing speed");
    speed = Math.min(Math.max(speed, 0.75), 1.5);
    startProcessing(speed);
    backend.playbackSpeed = speed;
}, 13);

Answer 3

一种方法可能是使用 setTimeout 或 setInterval 显示进度条的div。绕过它的另一种方法是做一些（伪）multithreading。

Javascript中的奇怪行为;在计算时不显示div

3 个答案: