javascript 異步加載

sshe 發(fā)布于2019-08-01 16:22 / 2017人閱讀

摘要：異步加載背景公司使用新的統(tǒng)計(jì)埋點(diǎn)，由于彈層出現(xiàn)地方較多，新埋點(diǎn)方法未能及時(shí)壓入所以需要自己引入阿里云上的埋點(diǎn)文件問題在代碼里輸入后臺(tái)直出到頁面上并未去請(qǐng)求，導(dǎo)致代碼報(bào)錯(cuò)問題動(dòng)態(tài)異步添加到中由于是異步的導(dǎo)致還沒加載完下面的埋點(diǎn)調(diào)用就開始執(zhí)行了

javascript 異步加載

背景：公司使用新的統(tǒng)計(jì)埋點(diǎn)，由于彈層出現(xiàn)地方較多，新埋點(diǎn)方法未能及時(shí)壓入common.js  所以需要自己引入阿里云上的埋點(diǎn)文件

問題1：在代碼里輸入

后臺(tái)直出到頁面上==script==并未去請(qǐng)求js，導(dǎo)致代碼報(bào)錯(cuò)

問題2：動(dòng)態(tài)==異步==添加到dom中

由于是異步的導(dǎo)致 js 還沒加載完下面的埋點(diǎn)調(diào)用就開始執(zhí)行了 js報(bào)onloginit undefind

解決方法

;
(function() {
    /**
     * 動(dòng)態(tài)加載js文件
     * @param  {string}   url      js文件的url地址
     * @param  {Function} callback 加載完成后的回調(diào)函數(shù)
     */
    var _getScript = function(url, callback) {
        var head = document.getElementsByTagName("head")[0],
            js = document.createElement("script");

        js.setAttribute("type", "text/javascript"); 
        js.setAttribute("src", url); 

        head.appendChild(js);

        //執(zhí)行回調(diào)
        var callbackFn = function(){
                if(typeof callback === "function"){
                    callback();
                }
            };

        if (document.all) { //IE
            js.onreadystatechange = function() {
                if (js.readyState == "loaded" || js.readyState == "complete") {
                    callbackFn();
                }
            }
        } else {
            js.onload = function() {
                callbackFn();
            }
        }
    }

    //如果使用的是zepto，就添加擴(kuò)展函數(shù)
    if(Zepto){
        $.getScript = _getScript;
    }
    
})();

在js加載完觸發(fā)回調(diào) 里執(zhí)行