javascript 异步加载

sshe 发布于2019-08-01 16:22 / 1901人阅读

摘要：异步加载背景公司使用新的统计埋点，由于弹层出现地方较多，新埋点方法未能及时压入所以需要自己引入阿里云上的埋点文件问题在代码里输入后台直出到页面上并未去请求，导致代码报错问题动态异步添加到中由于是异步的导致还没加载完下面的埋点调用就开始执行了

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异步加载

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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