How do you stop browser from 'hourglassing' when Javascript is DONE (stop throbber)?

Question

Writing a small HTML web page with some very simple Javascript in it, I noticed that after it was done, it kept the circle spinning (firefox). I've seen that many times on other pages and always thought that it was a Javascript error or loop problem, but this program I was running was definitely done.

Here is one example of a small web page that does this. After you click the button and it processes, the throbber (thanks for Kooilinc for the term) keeps on going.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>Grade Tester</title>
    <script language="javascript" type="text/javascript">       
      function calculate()
      {
       var grade = document.getElementById("grade").value.toUpperCase();        
        switch (grade)
        {
         case "A":
           document.write("Outstanding Achievement");
           break;

         case "B":
           document.write("Above Average");
           break;

         case "C":
           document.write("Average Achievement");
           break;

          case "D":
            document.write("Low Passing Grade");
           break;

         case "F":
           document.write("Failing Grade");
            break;
        }
      }
    </script>       
    </head>
  <body>
    Grade:<input type="text" id="grade" />
    <br /><input type="button" value="Get Result" onclick="calculate()" />
  </body>
</html>

I was able to stop it by hitting stop (right-click and stop).

What do I have to do to get Javascript to stop processing (or the browser to stop processing) after the script is done?

Note1: This occurred in FF4.01, not in IE or Chrome (for this code sample).

Note2: I tried the window.stop() function after the switch statement, and it didn't stop the throbber.

As per Lekensteyn's answer, document.close() after the switch statement solved this one, but here's an example that didn't throb at all and doesn't use document.close().

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>Lab 9.1</title>
  </head>
  <body>
    <script language="javascript" type="text/javascript">
      var phrase = "Every good boy does fine goes on the line."
      document.write(phrase.length + "<br />");
      for(var i = 0; i < phrase.length; i++)
      {
        document.write(phrase.charCodeAt(i) + " ");
      }
        document.write("<br />");
        document.write(phrase.toLowerCase() + "<br />");
        document.write(phrase.toUpperCase() + "<br />");
    </script>
  </body>
</html>

@Dr.Molle, that's why I was so specific in the question about how simple it was, so that people could logically assume the minimal javascript, and just answer the question. I'm not at the computer with the code, and can't give the example, which doesn't matter anyway. Even the teacher of the class said it was a common thing for the browser to keep running after the javascript was done, but he didn't know how to stop it either. — Lance Roberts, May 20 '11 at 06:02
do you uhave problem only with firefox or other browsers also — Devjosh, May 20 '11 at 06:03
@Devjosh, I was just using Firefox today, so that's all I have to go on right now. — Lance Roberts, May 20 '11 at 06:05
Your question is not specific, you ask for a crystal ball so far. Most the described behaviour appears if you use the method document.open() without closing the opened document at the end, but that could only be a guess without knowing any details. — Dr.Molle, May 20 '11 at 06:05
@Dr.Molle, actually my question is specific. I'm looking for how to have the browser always be stopped when javascript is done. Think of the simplest javascript there is, and that's probably close. I'll probably post something tomorrow when I'm at the other computer, but hopefully someone will have given me the simple answer by then. __It's not code specific.__ — Lance Roberts, May 20 '11 at 06:07
Will the hourglass also appear here on this SO-page or any other page on the web using js? If not, your question is not specific enough! But if, you have to report it to bugzilla. — Dr.Molle, May 20 '11 at 06:11
@Dr.Molle, Sometimes, I had plenty of hourglassing on SO and the SE sites, it's a very common thing in the web world. I just don't want it to happen on my sites. I'm thinking there may be some trick to call the 'Stop' function from inside javascript, or as someone else suggested, not letting javascript be the last thing processed on the page, by inserting useless HTML after it. But I'd like a definite answer. I'm sure someone has solved this common problem by now, it's one of the most irritating things on the internet. I hate watching that circle spin. — Lance Roberts, May 20 '11 at 06:14
@Devjosh, I didn't say I needed a quick solution, I'm in no hurry. It's not a javascript code specific problem. — Lance Roberts, May 20 '11 at 06:15
ok then it will be much better that if you will make the code available tomorrow you can hope getting the solution also try it in other browsers how they behave with it\ — Devjosh, May 20 '11 at 06:17
@Devjosh, It's not javascript code-dependent. Think of a script element with one function in it. Please listen to what I'm saying. I understand if you don't know the answer, it's obvious from using the web a lot and seeing that circle spin all the time, even on SO, that a lot of web programmers don't have the answer. — Lance Roberts, May 20 '11 at 06:20
There is a function window.stop() see it here http://www.java2s.com/Tutorial/JavaScript/0380__Window/windowstop.htm. But not sure where it should be place, if you want that all content of the page must loaded. — ace, May 20 '11 at 06:21
HourGlassing is not something that usually happens. It means something is still running. — James Khoury, May 20 '11 at 06:28
@Lance I don't think this is a common problem. I have never seen this on SO. And very rarely on other sites. Please follow the advice you have been given and post your code. — Turismo, May 20 '11 at 06:29
@OP: try search for *throbber*, or check the solutions here: https://developer.mozilla.org/en/JavaScript/A_re-introduction_to_JavaScript. That's all we can do without further information. — KooiInc, May 20 '11 at 06:56
@Lance Roberts: "[reproducible with any] minimal javascript" - norepro here on FF4; try starting FF in Safe Mode (w/o extensions), see if problem persists. — Piskvor left the building, May 20 '11 at 07:30
@Devjosh, there's some code for you, remember I'm looking for generic solution. — Lance Roberts, May 20 '11 at 16:06
@Lance Roberts: here's some code for you: `document.close()` document.write() executed after an document has been loaded opens a document, so close() is required on this document after write(). see my comment 10hrs ago. And also see: https://developer.mozilla.org/en/DOM/document.write If you had post your code at the beginning this question has been solved after 2 or 3 minutes. — Dr.Molle, May 20 '11 at 16:59

Lekensteyn · Accepted Answer · 2011-05-20T16:34:56.657

1

After calling document.write(), you must call document.close() if the document was previously not closed.

Basically, this happens:

The page is getting parsed
Scripts are processed
Page is "closed" (document.close())

If document.write() is called within step 2, it will be finished in step 3. Beyond step 3, if you call document.write, you're opening the page again, but the page won't close itself in FF (not sure about others). You've to close it by calling document.close().

I discovered this when I needed to open a window and write into it quickly in FF.

var win = window.open();
win.document.write("something");
// the next line is required to finish the page
win.document.close();

The same applies to your case:

<script type="text/javascript">
function calculate()
{
    var grade = document.getElementById("grade").value.toUpperCase();
    switch (grade)
    {
    case "A":
        document.write("Outstanding Achievement");
        break;
    // removed some cases
    case "F":
        document.write("Failing Grade");
        break;
    }
    // finish the document
    document.close();
}
</script>

MDC about document.write

edited May 20 '11 at 16:34

answered May 20 '11 at 16:15

Lekensteyn

64,486
22
159
192

OK, but I have other samples using document.write() that don't have document.close() and still don't throb (though it did solve it for this example). – Lance Roberts May 20 '11 at 16:17
In those cases, the page was still loading and the document tree was not finished yet: `` – Lekensteyn May 20 '11 at 16:18
@LanceRoberts: that example is similar the code I provided in my previous comment, the document is still loading, the whole document (HTML, not media like images) has not been fully parsed. – Lekensteyn May 20 '11 at 16:24
@Lekensteyn, but I'm saying the opposite, that the 2nd sample never throbs, it just stops without a close(). – Lance Roberts May 20 '11 at 16:27
@Lekensteyn, so it's a timing thing, and I just have to make sure and close all my documents since it's not completely deterministic. – Lance Roberts May 20 '11 at 16:41
@LanceRoberts: "timing thing" would not be the right word, but yes, you'd better close the document after a write. See also the MDC documentation. – Lekensteyn May 20 '11 at 17:01

How do you stop browser from 'hourglassing' when Javascript is DONE (stop throbber)?

1 Answers1

Linked