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

问题

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>

回答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

来源：https://stackoverflow.com/questions/6067976/how-do-you-stop-browser-from-hourglassing-when-javascript-is-done-stop-throbb

标签

javascript

browser

throbber