JS几种同步和异步

同步和异步

同步
    (1)
    var a=3;
    var b=4;
    console.log(b);
    var c=a+b;
    console.log(c);
    for(var i=0;i<10000;i++){
        c+=i;
    }
    console.log(c);
    按照顺序依次打印b，c，c，同步
    (2)
    function fn1(fn){
        console.log("a");
        fn();
    }
    function fn2(){
        console.log("b");
    }
    fn1(fn2);
    执行fn1，先打印a，再执行fn2，打印b，同步
    (3)
    console.log("a");
    document.addEventListener("abc",abcHandler);
    console.log("b");
    var evt=new Event("abc");
    document.dispatchEvent(evt);
    console.log("d");
    function abcHandler(e){
        console.log("c");
    }
    先打印a，b，然后抛发事件后执行函数，打印c，再打印d，同步
    
异步
    (1)
    console.log("a");
    setTimeout(function(){
        console.log("b");
    },0)
    console.log("c");
    打印a，c，b。0毫秒以后执行，代表执行完所有代码后的0毫秒，执行。异步

    (2)load，error事件
    console.log("a");
    var img=new Image();
    img.addEventListener("load",loadHandler);
    img.src="./img/3.jpg";
    console.log("c");
    function loadHandler(e){
        console.log("b");
    }
    先打印，a，c，加载完成后打印b。异步
    console.log("a");
    var img=new Image();
    img.addEventListener("error",loadHandler);
    img.src="./img/3.jpg";
    console.log("c");

    function loadHandler(e){
        console.log("b");
    } 
    当加载的图片不存在时，会报错，此时已经打印了a，b，再打印c。异步

当导入外部js文件时
    1.
    <script src="./js/a.js" ></script>
    <script src="./js/b.js" ></script>
    如果直接加载js文件，首先加载第一文件，并且执行这个js所有代码，完成后再加载第二文件，然后再执行里面的代码，这种情况也是同步。
    2.
    但是由于同步阻塞会造成浏览器显示问题，所以将其改为异步：
    <script src="./js/a.js" async></script>
    <script src="./js/b.js" async></script>
    添加async后，导入js文件的过程就为异步过程了。
    3.
    由于都添加了async，导入顺序错乱，可以在async后面添加defer，让其最后执行
    <script src="./js/a.js" async></script>
    <script src="./js/b.js" async defer></script>