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

我正在对一些音频文件进行一些漂亮的处理器重处理。在我进入这个函数startProcessing之前，我想显示覆盖整个页面的div，并说计算...问题是div只在函数终止后显示。当我点击激活该代码的按钮时，按钮冻结，只有当过程函数终止时才会解冻并显示加载程序。任何人看到类似的行为，并能解决它？Javascript中的奇怪行为;在计算时没有显示div

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; 
    }

来源

2012-12-06 Thomas

您支持哪些浏览器？如果你不需要IE，我会为网络工作者提倡。否则，我会试图弄清楚如何将处理分解成可以每隔10ms执行一次的小块。 – lbstr

只有铬;因为大量使用webaudio – Thomas

它看起来像延迟工作，但我仍然看着网络工作者，如果你很好奇，有一些时间。它们的目的是为了*完全像这样的问题。 – lbstr

尝试与一些延迟运行重计算：

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);

来源

2012-12-06 19:54:15

我曾试过这个;但你的解决方案确实工作，而分钟没有如此非常感谢你 – Thomas

你可以扔掉沉重加工成Web Worker。这将释放你的用户界面。

注：它不是IE浏览器友好的...只有IE10（我认为）

来源

2012-12-06 19:56:00

http://caniuse.com/#feat=webworkers +1网络工作人员 –

http://modernizr.com/ – 2012-12-06 19:59:21

感谢将看到网络工作者。 .don't不关心ie :) – Thomas

一种方法可以是使用的setTimeout或的setInterval您的div显示进度条。另一种解决方法是做一些（伪）multithreading。

来源

2012-12-06 19:57:41 Kafoso

或者，而不是做伪多线程，OP可以做真正的多线程：] –

@justnS：JavaScript本身不支持多线程。或者说，许多（如果不是全部的话）浏览器不会：（http://stackoverflow.com/questions/39879/why-doesnt-javascript-support-multithreading）。然而，通过AJAX调用可以实现某种程度的多线程，例如，将工作负载分布到多个PHP脚本实例中。虽然，那是服务器端多线程 - 而不是客户端。 – Kafoso

我指的是网络工作者（http://msdn.microsoft.com/zh-cn/hh549259.aspx）。它允许在后台线程上执行进程，这可以消除长时间任务对UI线程的阻塞。至于支持，所有主要玩家的当前版本都支持网络工作者。 –

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

回答

相关问题