Strange behaviour in Javascript; not showing div while calculating

Question

I'm doing some pretty processor heavy processing on a few audio files. Before I go in to this function called startProcessing I want to show a div which overlays the entire page and says calculating...Problem is the div is only shown after the function has terminated. When I click the button which activates tis code the button freezes and only when the process function has terminated does it unfreeze and show the loader. Anyone seen similar behaviour and was able to solve it?

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

what browsers are you supporting? I'd advocate for web workers, if you don't need IE. Otherwise, I'd try to figure out how you can break processing into small chunks that you can execute every 10ms or so. — lbstr, Dec 06 '12 at 20:00
It looks like the delay worked, but I'd still look into Web Workers if you are curious and have some time. They are intended for problems *exactly* like this one. — lbstr, Dec 07 '12 at 17:27

score 3 · Answer 1 · answered Dec 06 '12 at 19:56

3

You could throw the heavy processing into a Web Worker. That would free up your UI.

Note: Its not IE friendly... only IE10 (I think)

answered Dec 06 '12 at 19:56

Justin Self

6,137
3
33
48

score 1 · Accepted Answer · answered Dec 06 '12 at 19:54

1

Try to run heavy calculations with some delay:

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

answered Dec 06 '12 at 19:54

Yury Tarabanko

44,270
9
84
98

I had tried this; but your solution does work while min didn't so thank you very much – Thomas Dec 06 '12 at 19:58

score 0 · Answer 3 · edited May 23 '17 at 12:12

0

One approach could be to use setTimeout or setInterval for your div showing the progress bar. Another way to get around it is doing some (pseudo) multithreading.

edited May 23 '17 at 12:12

Community

1
1

answered Dec 06 '12 at 19:57

Kafoso

534
3
20

Or instead of doing pseudo multithreading, OP could do real multithreading :] – Justin Self Dec 08 '12 at 01:50
@justnS: Javascript in itself does not support multithreading. Or rather, many (if not all) browsers don't: (http://stackoverflow.com/questions/39879/why-doesnt-javascript-support-multithreading). However, some level of multithreading can be achieved through AJAX calls, e.g. distributing the workload across multiple instances of a PHP scripts. Although, that is then server-side multithreading - not client-side. – Kafoso Dec 09 '12 at 20:32
I was referring to web workers (http://msdn.microsoft.com/en-us/hh549259.aspx). It allows processes to be performed on a background thread which can eliminate the blocking of the UI thread for long tasks. As for support, current versions of all the major players support web workers. – Justin Self Dec 09 '12 at 20:52

Strange behaviour in Javascript; not showing div while calculating

3 Answers3