0

I have several java script functions that are doing computing intensive stuff on click event or when they are invoked. I am trying to show a spinner/loader when these functions are invoked so that my application looks more responsive then just stuck for 15-20 secs. To solve this I am using LoadingOverlay- http://gasparesganga.com/labs/jquery-loading-overlay/

The problem I am facing is, even after when the loading spinner is shown and the control flow moves to the time/computing intensive calls - the browser freezes and the spinner gif stops spinning thus defeating the whole purpose of application looking responsive. Any help what can I do to solve this and improve the functionality would be great. Thanks

Select: function () {
            console.log("--click event of Select button--");
            $("#buildSelectionDialog").LoadingOverlay("show");
            setTimeout(function(){
                var aData = getSelectedRowFromTable('buildsListTable');

                if (aData == null) {
                    alert("No Build Selected.");
                    return;
                }

                var selectedBuildName = aData[0];

                clearVisitorsEntry(); // View Cache is cleared as build is changing

                if ($('#dialogPurpose').val() == "1") {
                    setApplicationUnderTestBuild(selectedBuildName);

                    //MOST TIME Consuming STEP --
                    var autResults = getBuildResultsForTestType(getApplicationUnderTestBuild(), getSelectedTestType());
                     displayResultsForSelection();

                     updateRetrievalTimeTooltip(selectedBuildName);
                     enableAuxiliaryMenusForBuild(selectedBuildName);
                }
                else{
                    compareBuilds(selectedBuildName);
                }

                $("#buildSelectionDialog").LoadingOverlay("hide");
                $("#buildSelectionDialog").dialog("close");                    
            }, 500);
        }
dupree
  • 1
  • 1
  • Appears to be a common problem eg http://stackoverflow.com/questions/672732/prevent-long-running-javascript-from-locking-up-browser / http://stackoverflow.com/questions/714942/how-to-stop-intense-javascript-loop-from-freezing-the-browser. No obvious workaround other than optimising the js / breaking up any loops (your specifics are not not included). I got around this in the past by performing the calculations server-side, but that may not be an option for you. – freedomn-m Jun 05 '15 at 10:34
  • Simple jsfiddle to demonstrate the issue: https://jsfiddle.net/uxpobtks/ – freedomn-m Jun 05 '15 at 10:43
  • @freedomn-m Thanks for your inputs, I am currently looking into setTimeout() functions and Web workers. – dupree Jun 05 '15 at 12:20
  • On digging down the issue, I realized there is an Ajax request I am making with Async flag as - false because the next steps depend upon the results coming from that ajax request. So that is the blocking call in the flow. Is it possible that I can put that ajax request in a Worker thread and show a loading/spinner in my main UI that would be responsive and not frozen. Trying this approach. – dupree Jun 08 '15 at 09:36
  • You don't need a 'worker thread' for an ajax call. Just show the 'processing...' UI (eg a jquery-ui dialog with no close) then make the `$.ajax` call and close the dialog on `success` – freedomn-m Jun 08 '15 at 09:47
  • @freedomn-m Yes I thought of that, but the problem is the message/image has to be static as gifs are getting frozen due to the s(ync)jax calls. And I do not want to show a static image or content. – dupree Jun 08 '15 at 13:14
  • Sorry, thought you meant you were going to change your sync calls to async. You should be able to refactor the 'flow' to handle an async call. – freedomn-m Jun 08 '15 at 13:17

0 Answers0