when does setTimeout start executing in a inline [

2019-07-12 16:49发布

站内问答 / JavaScript
1271 2 4

say I have code like this

<html><body>
<bunch of html tags...>
<script>
     function myF()={};
     setTimeout(myF, 100);
</script>
<lots of more html goes here.....></body></html>

As I understand it, the script will be evaluated as the html is parsed. But, in this case we have a setTimeout followed by lots of html parsing. When will the timeout get to make its call? Does it need to wait until all the html parsing is done before myF is finally called, or will myF be called when the timeout event occurs, even if there is more html parsing to accomplish?

2条回答
来，给爷笑一个
2楼-- · 2019-07-12 17:27

No, setTimeout() does not necessarily wait for DOMContentLoaded

If it did, we wouldn't have need for the DOMContentLoaded event, but if that's not enough to convince you, below is conclusive evidence:

<script>
  window.addEventListener('load', function() {
    alert("Window Loaded");
  });

  document.addEventListener('DOMContentLoaded', function() {
    alert("DOM Content Loaded");
  });

  setTimeout(function() {
    alert(typeof jQuery == 'function' ? 'jQuery Loaded' : 'jQuery Not Loaded');
  }, 15);
</script>
<p>This content will be loaded before jQuery is fetched.</p>
<script>
  document.write('<script src="https://code.jquery.com/jquery-3.2.1.min.js?' + Math.random() + '" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></' + 'script>');
</script>
<script>
  alert('Loaded after <script src="jquery.min.js">');
</script>
<p>This content will not be loaded until after jQuery is fetched.</p>

If it had to wait for DOMContentLoaded, you'd see

Loaded after <script src="jquery.min.js">
DOM Content Loaded
Window Loaded
jQuery Loaded

However (at least for me), a good portion of the time, the output is

jQuery Not Loaded
Loaded after <script src="jquery.min.js">
DOM Content Loaded
Window Loaded

Even though the parsing of HTML is single-threaded, it is blocked when <script> without async and <link> must pause to fetch the resource from the URL and execute the script or stylesheet respectively, which means there's a race-condition between the DOMContentLoaded event and setTimeout(function() { ... }, 15).

查看更多
0人赞 添加讨论(0) 举报
再贱就再见
3楼-- · 2019-07-12 17:40

Don't rely on that. setTimeout doesn't create an 'interrupt' so to speak, all it does it add the function to a queue that is checked when the browser decides to check it. This could be at the end of the thread loop, or it could be during HTML parsing.

Further reading on JavaScript timers: https://johnresig.com/blog/how-javascript-timers-work/

The better (standard) way to wait until the HTML is finished parsing is like this:

<html><body>
<bunch of html tags...>
<script>
    function myF()={};
    document.addEventListener("DOMContentLoaded", myF);
</script>
<lots of more html goes here.....></body></html>

Or, using jQuery, like this:

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<bunch of html tags...>
<script>
    function myF()={};
    $(myF);
</script>
<lots of more html goes here.....></body></html>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)