javascript 異步加載

sshe 發布于2019-08-01 16:22 / 2011人閱讀

摘要：異步加載背景公司使用新的統計埋點，由于彈層出現地方較多，新埋點方法未能及時壓入所以需要自己引入阿里云上的埋點文件問題在代碼里輸入后臺直出到頁面上并未去請求，導致代碼報錯問題動態異步添加到中由于是異步的導致還沒加載完下面的埋點調用就開始執行了

javascript 異步加載

背景：公司使用新的統計埋點，由于彈層出現地方較多，新埋點方法未能及時壓入common.js 所以需要自己引入阿里云上的埋點文件

問題1：在代碼里輸入

后臺直出到頁面上==script==并未去請求js，導致代碼報錯

問題2：動態==異步==添加到dom中

由于是異步的導致 js 還沒加載完下面的埋點調用就開始執行了 js報onloginit undefind

解決方法

;
(function() {
    /**
     * 動態加載js文件
     * @param  {string}   url      js文件的url地址
     * @param  {Function} callback 加載完成后的回調函數
     */
    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);

        //執行回調
        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，就添加擴展函數
    if(Zepto){
        $.getScript = _getScript;
    }
    
})();

在js加載完觸發回調里執行

js.onload = function callback() {}

云服務器 GPU云服務器異步動態加載異步加載圖片異步腳本加載 easyui異步加載

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50468.html

瀏覽器下的 Event Loop

摘要：前言是以單線程的形式運行在宿主環境下，采用了回調的形式來解決異步任務。線程中步就是在瀏覽器下的。前言 javascript 是以單線程的形式運行在宿主環境下，javascript 采用了回調的形式來解決異步任務。為什么是單線程？ javascript 的最開始的出現是為了給 web 頁面增添一些動態的效果，那么就避免不了獲取頁面上的元素信息，如果 javascript 是以多線程的...

forrest23 2019-08-23 16:50 評論0 收藏0
JavaScript單線程、加載與模塊化

摘要：單線程與瀏覽器多線程是單線程的因為運行在瀏覽器中，是單線程的，每個一個線程。若以多線程的方式操作這些，則可能出現操作的沖突。零延遲零延遲并不是意味著回調函數立刻執行。異步編程的中方法包括回調函數事件監聽采用事件驅動模式。 JavaScript單線程與瀏覽器多線程 Javascript是單線程的：因為JS運行在瀏覽器中，是單線程的，每個window一個JS線程。作為瀏覽器腳本語言，Ja...

shevy 2019-08-19 18:41 評論0 收藏0
JS異步那些事五（異步腳本加載）

摘要：遵循的是異步模塊定義規范，遵循的是通用模塊定義規范。不同的腳本加載這個模塊，得到的都是同一個實例。關于異步那些事就寫到這里了，很多地方理解的不夠深刻希望大家多多指教。 JS異步那些事一（基礎知識）JS異步那些事二（分布式事件）JS異步那些事三（Promise）JS異步那些事四（HTML 5 Web Workers）JS異步那些事五（異步腳本加載）異步腳本加載阻塞性...

terasum 2019-08-21 13:50 評論0 收藏0
JavaScript文件的同步和異步加載

摘要：本文簡述一些文件的同步和異步加載方式。當然缺點是，不能保證有依賴關系的文件的加載順序。總結如果是單一或少數文件，可以在的最后插入標簽，以同步方式加載。如果是多個文件，建議異步加載，以避免阻塞界面渲染，也縮短整體加載時間。對于JS文件的引用，盡管當前有不少框架和工具（比如webpack，commonjs，requiresjs等）都做了很好的處理。但是拋開這些框架，了解原生的加載方式還是...

williamwen1986 2019-08-21 12:01 評論0 收藏0
vue異步加載高德地圖

摘要：異步加載異步加載指的是為指定加載的回調函數，在的主體資源加載完畢之后，將自動調用該回調函數。幾種加載js的方式同步加載異步加載延遲加載同步加載用的最多的一種方式，又稱阻塞模式，會阻止瀏覽器的后續處理，停止后續的解析，只有當當前加載完成，才能進行下一步操作。所以默認同步執行才是安全的。但這樣如果js中有輸出document內容、修改dom、重定向等行為，就會造成頁面堵塞。...

zacklee 2019-08-22 18:08 評論0 收藏0