关于同步异步的两个小练习

判断如下代码在控制台打印顺序

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        setTimeout(
            function(){
                console.log("step0");
            }
        ,0);
        console.log("step1");
        console.log("step2");
        console.log("step3");
        console.log("step4");
    </script>
</body>
</html>

结果:

打印顺序结果

原因分析:
浏览器会在处理完同步代码后再开始处理异步代码。

判断如下代码在控制台打印顺序

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        console.log("step1");
        console.log("step2");
        console.log("step3");
        console.log("step4");
        console.log("step5");
        var sc = document.createElement("script");
        sc.src = "./add.js";
        var head = document.querySelector("head");
        head.appendChild(sc);
        sc.onload =function(){
            console.log("load success");
        }
        console.log("step7");
    </script>
</body>
</html>

add.js:

console.log("step6");

结果:


打印顺序结果

原因分析:
在使用appendChild插入script的时候,浏览器会异步加载该script标签中的代码,由于浏览器会在处理完同步代码后再开始处理异步代码,所以会出现如图的结果。

参考链接:http://www.phpv.net/html/1700.html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 33,719评论 18 399
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 9,059评论 1 19
  • 依偎在你身旁 我就成了女王。 王冠的光芒里折射出太阳, 梳妆台上是温婉的月亮。 依偎在你身旁, 我永远是长不大的女...
    lily_8aed阅读 4,110评论 0 1
  • Bootstrap 样式 行 .row , 如: ... 横跨多少列 .span*, 网格布局包含 12 列,...
    xiaojianxu阅读 2,726评论 0 1
  • 《点睛》~1.赏图赵佶登大位几年了,人称徽宗。这位皇帝喜好书法,痴于绘画,宫中搜集历代名画无数。这天,又在宫中欣赏...
    梦小仙杂记阅读 1,652评论 3 4

友情链接更多精彩内容