js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面 ,
做手机端开发时，发现一个问题，有些浏览器，在网速比较慢的情况下，js文件没有加载完，后续的调用已经开始调用了，导致出错。
后来使用此法，保证了任何时候都完全是按照js的先后顺序执行的。
源码：
/** * js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面* 原理：利用 ajax 异步多线程快速加载， 每个文件加载完成后存入到加载完成数组中, * ?????显示到页面时完全按传入的顺序加入到页面 * @param {array} ???files ?????????????要加载的文件列表，显示时也按照此顺序一个一个加入到页面* @param {fun} ?????funOk ?????????????加载完成后的回调* @param {fun} ?????funPercent ????????加载过程中的回调*/ ???function ajaxLoadJs(files,funOk,funPercent) { ??var fileData = [];//记录加载完的文件 ??var oknum = 0 ; //加载完成的数量 ?????//循环异步加载文件 ??for (var i = 0; i < files.length; i++) { ?????loadfile(files[i]); ??} ??//加载文件 ??function loadfile(file) { ?????$.ajax({ ?????????url: file, ?????????dataType: "text", ?????????success: function (data) { ???????????oknum++; ?????????????fileData[file] = data; //加载成功写入数组 ?????????????loadok(file);//调用成功后的处理 ?????????}, ?????????error: function (XMLHttpRequest, textStatus, errorThrown) { ?????????????console.log("加载失败："+file) ?????????????console.log(textStatus) ?????????????console.log(errorThrown) ????????????????????????????????????} ?????}); ??} ??//加载成功后的处理 ??function loadok(file) { ?????//计算加载进度 ?????//这里加1，因为输出js文件到页面，也需要时间，加1就是把输出js的时间计为一个文件 ?????//这样所有文件加载完成后是 99% ，输出到页面完成后，才是 100% ??????????var percent = oknum ?/ (files.length + 1) ; ??????if(typeof(funPercent)=="function") funPercent(percent, file); ?????//加载完成后，按传的顺序输出js到页面 ?????if (oknum == files.length) { ?????for (var i = 0; i < files.length; i++) { ???????var script = document.createElement(‘script‘); ???????script.innerHTML = fileData[files[i]]; ???????document.getElementsByTagName(‘HEAD‘).item(0).appendChild(script); ?????} ?????if(typeof(funPercent)=="function") funPercent(1, "all"); //输出完成即认为加载完成 ????????if(typeof(funOk)=="function") funOk();//回调完成事件 ?????} ???????}}使用示例：
var files = [ ?‘laz_word/controllers/word_set_ctrl.js?ver=31‘, ?‘laz_word/controllers/word_set_ctrl.js?ver=31‘,];ajaxLoadJs(files,function(){ ???console.log("====over======"); ????},function(percent,file){ ??console.log(percent,file);});来源：jsfun.cn
http://www.jsfun.cn/#ajaxLoadJs
js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面
原文地址：https://www.cnblogs.com/jsfuns/p/8969136.html