发表新帖
发表新帖

Why does this setInterval/[removed] code work on Chrome but not on Firefox?

后端 未结
关注
2 491
时光说笑
时光说笑 2020-12-11 23:24

Here is a simple program that prints numbers one to ten on the browser window.

相关标签:
2条回答
  • 谎友^
    2020-12-11 23:58

    In addition to the points by T.J. Chowder about the webkit bug, consider these two scripts and why your code specifically doesn't work like you may have expected.

    Script 1

    <html>
<head>
    <title>foo</title>
    <script>    
    t = 1;
    var a = function timer() {
        if (t < 11) {
            document.write(t + "<br/>");

            t = t + 1;
        }

    }
    setInterval(a, 100);
</script>
</head>
<body>
    <script>
        alert('page fully loaded')
    </script>
</body>
</html>

    Script 2

    <html>
<head>
    <title>foo</title>
    <script>  
    for(var i = 1; i < 11; i++) { 
        document.write(i + "<br />");
    }
</script>
</head>
<body>
    <script>
        alert('page fully loaded')
    </script>
</body>
</html>

     

    Results

    Script 1

    In the first, setInterval() is triggering again after the page is closed. You'll see the alert message indicating the page had executed fully, and the document is closed for writing. After that happens, you will see the document.write being triggered by the first interval. This unloads the old, previously closed document, and adds only 1<br /> to the page.

    Since the old document has been unloaded, the existing javascript is gone and there is nothing else to execute beyond the first iteration.

    Script 2

    In the second script, document.write is executed multiple times while the current document is still open. Since the document.write functions are executed before the document is closed naturally, the original contents of the document are never overwritten.

     

    Conclusions

    Its better to interact with DOM elements directly than to use document.write.

    There is some more good reading on it here: https://pigeoto.wordpress.com/2011/01/19/why-doesnt-document-write-work-with-setinterval/

    0 讨论(0)
  • 迷失自我
    2020-12-12 00:18

    It's a bug in Chrome WebKit; according to Kaiido, it also happens on Safari.

    Calling document.write after the main parsing of the page is complete involves an implicit call to document.open. According to the specification, calling document.open should destroy the document, remove all event handlers, and discard all tasks. That means what Firefox is doing is correct, because it shows 1 in a blank document. It doesn't keep going because the task scheduled by the setInterval has been discarded.

    As you've noted, sometimes the Firefox spinner keeps going, like it's expecting something else to happen. I like Adam Konieska's theory about why that is: When we did the document.write(1), we implicitly did a document.open, and it's waiting for a document.close. And in fact, if we add a document.close to your code to test that, the spinner doesn't stick around:

    var t = 1;
var a = function timer() {
  if (t < 11) {
    document.write(t + "<br/>");
    t = t + 1;
    document.close(); // Just to test Firefox's spinner
  } else {
    clearInterval(handle);
  }
}
var handle = setInterval(a, 100);

    0 讨论(0)
 看不清?
提交回复
热议问题