Question 11197 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Firefox hangs on a long lasting operation – Jquery

I have an MVC application and I am using a gif to indicate loading by using JQuery.
The code below works okay on Chrome.

   // show loading 
   window.parent.loading(true);
   $.get('@Url.Action("getUserAccounts")', function (data) {
        $("#usersAccountsDiv").html(data);
        window.parent.resizeIframe();
    });

However, in Firefox, the loading indicator freezes along with the whole page. Since the operation is not taking too much time, I tried to mock this by using a sleep function like that and the results were the same on Chrome and Firefox. While Chrome keeps playing the gif, Firefox stops playing it:

   window.parent.loading(true);
   $.get('@Url.Action("getUserAccounts")', function (data) {
        function (data) {
            function sleepFor(sleepDuration) {
                var now = new Date().getTime();
                while (new Date().getTime() < now + sleepDuration) {
                    /* Do nothing */
                }
            }

            sleepFor(10000);
            $("#usersAccountsDiv").html(data);
            window.parent.resizeIframe();
    });

I used w3schools’ editor to see the difference:
w3 try editor

I used this code below in both browsers for comparison:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
  $("#showMe").show();
    $.get("demo_test.asp", function(data, status){
       function sleepFor(sleepDuration) {
                    var now = new Date().getTime();
                    while (new Date().getTime() < now + sleepDuration) {
                        /* Do nothing */
                    }
                }

                sleepFor(10000);
    });
  });
});
</script>
</head>
<body>

<button>Send an HTTP GET request to a page and get the result back</button>
<div id="showMe" style="display:none">
                                <img src="https://media.giphy.com/media/3o7bu3XilJ5BOiSGic/giphy.gif" />
                            </div>

</body>
</html>

I tried to mock it that way because I could not reproduce this issue on my local. It only happens in QA environment. The operation takes longer in QA and that causes Firefox to freeze.

On Firefox, once the code hits to $("#usersAccountsDiv").html(data); function, the problem occurs. That’s why I remove .html() function and replaced it with sleepFor function to make the JS engine wait on Firefox. My expectation was gif should keep playing as it does in Chrome while I wait for sleepFor function to end.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I have checked the response data returning from get action and I found the solution. Returned html data contains 18 lines of scripts.

     $("#usersAccountsDiv").html(data);

    After that, I debugged the JQuery html and append methods and realized that script tags are making Firefox freeze in a for loop (domManip function). I resolved the issue by reducing the included scripts to my response but it is still a weird problem. All those scripts are working fine on Chrome but not on Firefox.

    Thanks!


  2. 0

    First, replace

    sleepFor(10000);
$("#usersAccountsDiv").html(data);
window.parent.resizeIframe();

    with

    window.setTimeout(function() {
    $("#usersAccountsDiv").html(data);
    window.parent.resizeIframe();
}, 10000);

    See https://developer.mozilla.org/en-US/docs/Web/API/setTimeout for usage of setTimeout().

    Do not make busy-waiting loops like your function sleepFor() – this precisely bogs down the browser’s JavaScript engine.

    Then, I suggest to focus on the first code snippet (without sleepFor() nor setTimeOut()) and use the Firefox debug console (press F12 key) to figure out what kind of answer you get from the server on your get() request.

    To do this, press F12, a sidebar opens, go to the "network" tab and look for the GET request that your code sends (each GET is a line, timing diagram to the right of it). Select it by clicking, another sub-window opens with details of the GET request – go to the "response" sub-window and inspect whether it is what you expect.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search