CODEWITHSUNDEEP
javascripthtml
Thomas
Thomas

Reputation: 1706

Strange behaviour in Javascript; not showing div while calculating

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

Upvotes: 1

Views: 92

Answers (3)

Kafoso
Kafoso

Reputation: 554

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.

Upvotes: 0

Justin Self
Justin Self

Reputation: 6265

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)

Upvotes: 3

Yury Tarabanko
Yury Tarabanko

Reputation: 45121

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

Upvotes: 1

Related Questions