JS_0041：JS加载JS文件 异步同步加载js文件 同步加载js文件 顺序加载js文件 等待请求数据后，再加载后面的js文件

1，

<script>

    // 动态加载JS文件
    function loadJS( url, callback ){
        var script = document.createElement('script'),fn = callback || function(){};
        script.type = 'text/javascript';
        //IE
        if(script.readyState){
            script.onreadystatechange = function(){if( script.readyState == 'loaded' || script.readyState == 'complete' ){script.onreadystatechange = null;fn();}};
        }else{
            script.onload = function(){fn();};
        }
        script.src = url;
        document.getElementsByTagName('body')[0].appendChild(script);
    };

    //用法
    loadJS('source/data.js',function(){
        // 这样可以等待 data.js 中的ajax请求 的数据返回后，再加载后面的 home.js 文件，
        // 这样实现同步加载数据，又不用改写后面js文件中的代码结构。
        loadJS('home/js/home.js',function(){});
    });

</script>

 

 

通过给script标签增加 defer属性或者是 async 属性来实现

<script src="file.js" defer></script>

注解：

async和defer不同之处是async加载完成后会自动执行脚本，defer加载完成后需要等待页面也加载完成才会执行代码

 

 

2，

// 动态加载JS文件
function loadJS( url, callback ){
    var script = document.createElement('script'),fn = callback || function(){};
    script.type = 'text/javascript';
    //IE
    if(script.readyState){
        script.onreadystatechange = function(){if( script.readyState == 'loaded' || script.readyState == 'complete' ){script.onreadystatechange = null;fn();}};
    }else{
        script.onload = function(){fn();};
    }
    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
};
//用法
loadJS('http://oss.esunar.com/My_Code/Libs/CheckWXES.js',function(){});