美文网首页我爱编程
用$.getScript()动态同步加载js——串行加载

用$.getScript()动态同步加载js——串行加载

作者: 景阳冈大虫在此 | 来源:发表于2018-03-21 15:31 被阅读0次

页面的js要根据用途不同,选择动态加载压缩后代码,还是源码。
而不管是哪种,在各个js有相互依赖关系的时候,我们都希望他们能够按照顺序加载,如果异步执行,必然会导致加载完成的顺序错乱而发生页面加载错误。
太长不看版:使用递归,在$.getScript()回调处,调用自身,以达到在完成一个js加载之后再加载下一个的目的

假设,我们有一个对象,用于存放各种js路径

var jslist = {
    jslistDebug: [
        'third_lib/js/bootstrap.min.js',
        'third_lib/js/plugins/chosen/chosen.jquery.js',
        'third_lib/js/plugins/metisMenu/jquery.metisMenu.js',
        'third_lib/js/plugins/slimscroll/jquery.slimscroll.min.js',
    ],
    jslistNormal: ['1.1.0/js/test.min.js','1.1.0/js/end.min.js'],
};

假设,这些js只要加载完成的顺序发生变化,页面就会加载失败。
为了使用$.getScript()这个本质上是ajax请求的方法,我们先原生JavaScript加载jquery

(function () {
        var script = window.document.createElement('script');
        var jslistNormal = [],
            jslistDebug = [],
            inter;
        script.type = 'text/javascript';
        script.src = befHref + 'third_lib/js/jquery-2.1.1.js';
        document.getElementsByTagName('body')[0].appendChild(script);
        inter = setInterval(function () {
            if (typeof $ === 'function') {
                loadjs();
                clearInterval(inter);
            }
        }, 100);
    })();

嗯,就是说,只要设定一个定时器去判断jquery是否加载完,然后再使用这个方法就好。
下一步,编写loadjs()方法。

function loadjs() {
        var jslistNormal = [],
            jslistDebug = [];
        jslistNormal = window.jslist.jslistNormal;
        jslistDebug = window.jslist.jslistDebug;
        if (getQueryString('debug') == 1) {//调试模式
            loadDebug(jslistDebug, 0);
        } else {
            loadNormal(jslistNormal, 0);
        }

    }

这个loadjs(),是去判断到底该用哪个js路径的,下一步,就是重点了

function loadNormal(jslistNormal, n) {
        var length = jslistNormal.length;
        var jsSrc =  jslistNormal[n];
        if (n < length) {
            $.getScript(jsSrc, function () {
                n++;
                arguments.callee(jslistNormal, n);
            })
        } 
    }

这里用了递归,去遍历完整个list,因为是在$.getScript()的回调里,所以能够保证,在加载完一个js之后,才会加载另一个js。
至此,完成了串行动态加载js
END

相关文章

  • 用$.getScript()动态同步加载js——串行加载

    页面的js要根据用途不同,选择动态加载压缩后代码,还是源码。而不管是哪种,在各个js有相互依赖关系的时候,我们都希...

  • 动态加载js

    有时候为了节省资源,需要动态加载js文件,可以试试一下两种方法。 1.jquery方法 $.getScript("...

  • JavaScript动态加载js和css

    动态加载js 参考:javascript 性能优化 动态加载css 参考: 动态加载 css 方法实现和深入解析 ...

  • 系统源码简析

    同步加载 异步加载 页面的懒加载,只针对vue文件,js文件被放到app.js中了, 比如 share.js。 a...

  • js动态加载HTML元素时点击事件无效

    js动态加载HTML元素时点击事件无效: 是因为这些动态加载的这些HTML,是在css,js代码加载完后,再添加的...

  • 浏览器性能提升--js加载优化

    动态加载js脚本函数封装优点:js代码加载不阻塞浏览器其他的执行

  • js加载同步还是异步? JSONP原理?

    1、浏览器端的js加载默认是同步还是异步?同步,可以人为设置异步;async让js异步加载,需要每个script标...

  • 前端动态加载JS

    最近机顶盒遇到一种特殊场景需要按需加载js,所以特此记录动态加载JS的方法这个方法加载的是本地的js,如果要加载非...

  • AJAX的知识梳理

    【目录】 一、用AJAX加载CSS二、用AJAX加载JS三、用AJAX加载HTML四、用AJAX加载XML五、用A...

  • 同步按顺序动态加载JS

    我们知道, 现代主流浏览器(如chrome)加载js是异步执行的,会同时加载多个js,那么当我们需要在js中动态加...

网友评论

    本文标题:用$.getScript()动态同步加载js——串行加载

    本文链接:https://www.haomeiwen.com/subject/fxegqftx.html