什么时候setTimeout开始执行inline< script> [英] when does setTimeout start executing in a inline <script>
问题描述
说我有这样的代码
< html>< body>
<一堆html标签...>
< script>
函数myF（）= {};
setTimeout（myF，100）;
< / script>
<还有很多html在这里......>< / body>< / html>
据我了解，脚本将在html解析时被评估。但是，在这种情况下，我们有一个setTimeout，接着是大量的html解析。超时时间何时才能打电话？它是否需要等到所有html解析完成后才会最终调用myF，或者在发生超时事件时调用myF，即使有更多的html解析完成？
不，setTimeout（）不是必然等待DOMContentLoaded
如果确实如此，我们不需要 DOMContentLoaded 事件，但如果这还不足以说服你，以下是确凿的证据：
< 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>这个内容将在jQuery之前被加载取出< / p为H.<脚本> 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>在获取jQuery之前，不会加载此内容< / p>
如果必须等待 DOMContentLoaded code>，你会看到
在< script src =jquery.min.js后加载>>
DOM内容加载
加载窗口
jQuery加载
然而至少对我来说），很大一部分时间，输出是
jQuery未加载
加载后< ; script src =jquery.min.js>
DOM内容加载
加载窗口
即使HTML的解析是单一的 - 线程化时，当< script> 没有 async 和< link>时， 必须暂停以从URL中获取资源并分别执行脚本或样式表，这意味着 DOMContentLoaded 之间存在 race-condition c $ c> event和 setTimeout（function（）{...}，15）。
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?
解决方案 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).
这篇关于什么时候setTimeout开始执行inline< script>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
