脚本加载后执行JS回调函数的方法
这次给大家带来脚本加载后执行JS回调函数的方法，脚本加载后执行JS回调函数的注意事项有哪些，下面就是实战案例，一起来看一下。
项目中经常会遇到这样的问题：当某个 js 脚本加载完成后再执行相应任务，但很多朋友可能并不知道怎么判断我们要加载的 js 文件是否加载完成，如果没有加载完成我们就调用 js 文件里面的函数是不会成功的。本文主要讲解怎么在成功加载 js 文件后再执行相应回调任务。
基本思路
我们可以动态的创建 <script> 元素，然后通过更改它的 src 属性来加载脚本，但是怎么知道这个脚本文件加载完成了呢？因为有些函数需要在脚本加载完成才能调用。IE 浏览器中可以使用 <script> 元素的 onreadystatechange 来监控加载状态的改变，并通过判断它的 readyState 是 loaded 或 complete 来判断脚本是否加载完成。而非 IE 浏览器可以使用 onload 来直接判断脚本是否加载完成。
动态脚本简单示例
一个 简单 的实现过程如下：
// IE下：
var HEAD = document.getElementsByTagName('head')[0] || document.documentElement
var src = 'http://xxxxxx.com'
var script = document.createElement('script')
script.setAttribute('type','text/javascript')
script.onreadystatechange = function() {
if(this.readyState === 'loaded' || this.readyState === 'complete') {
console.log('加载成功！')
}
}
script.setAttribute('src', src)
HEAD.appendChild(script)
// Chrome等现代浏览器：
var HEAD = document.getElementsByTagName('head')[0] || document.documentElement;
var src = 'http://xxxxxx.com'
var script = document.createElement('script')
script.setAttribute('type','text/javascript')
script.onload = function() {
console.log('加载成功!')
}
script.setAttribute('src', src)
HEAD.appendChild(script)原理很简单，根据这两个简单的原理，我们进行一些修改，我把改成了两个函数，分别是 串行加载 和 并行加载 。
串行和并行动态脚本
当传一个包含多个JS文件路径的数组时，串行加载函数从第一个脚本文件加载开始，每加载成功一个便开始加载下一个脚本文件，全部加载完成后执行回调函数。而并行加载是一开始便加载全部的脚本文件，也就是他们从同一点开始加载，当全部加载完成后，执行回调函数。
/**
* 串行加载指定的脚本
* 串行加载[异步]逐个加载，每个加载完成后加载下一个
* 全部加载完成后执行回调
* @param {Array|String} scripts 指定要加载的脚本
* @param {Function} callback 成功后回调的函数
* @return {Array} 所有生成的脚本元素对象数组
*/
function seriesLoadScripts(scripts, callback) {
if(typeof(scripts) !== 'object') {
var scripts = [scripts];
}
var HEAD = document.getElementsByTagName('head')[0] || document.documentElement;
var s = [];
var last = scripts.length - 1;
//递归
var recursiveLoad = function(i) {
s[i] = document.createElement('script');
s[i].setAttribute('type','text/javascript');
// Attach handlers for all browsers
// 异步
s[i].onload = s[i].onreadystatechange = function() {
if(!/*@cc_on!@*/0 || this.readyState === 'loaded' || this.readyState === 'complete') {
this.onload = this.onreadystatechange = null;
this.parentNode.removeChild(this);
if(i !== last) {
recursiveLoad(i + 1);
} else if (typeof(callback) === 'function') {
callback()
};
}
}
// 同步
s[i].setAttribute('src', scripts[i]);
HEAD.appendChild(s[i]);
};
recursiveLoad(0);
}
/**
* 并行加载指定的脚本
* 并行加载[同步]同时加载，不管上个是否加载完成，直接加载全部
* 全部加载完成后执行回调
* @param {Array|String} scripts 指定要加载的脚本
* @param {Function} callback 成功后回调的函数
* @return {Array} 所有生成的脚本元素对象数组
*/
function parallelLoadScripts(scripts, callback) {
if(typeof(scripts) !== 'object') {
var scripts = [scripts];
}
var HEAD = document.getElementsByTagName('head')[0] || document.documentElement;
var s = [];
var loaded = 0;
for(var i = 0; i < scripts.length; i++) {
s[i] = document.createElement('script');
s[i].setAttribute('type','text/javascript');
// Attach handlers for all browsers
// 异步
s[i].onload = s[i].onreadystatechange = function() {
if(!/*@cc_on!@*/0 || this.readyState === 'loaded' || this.readyState === 'complete') {
loaded++;
this.onload = this.onreadystatechange = null;
this.parentNode.removeChild(this);
if(loaded === scripts.length && typeof(callback) === 'function') callback();
}
};
// 同步
s[i].setAttribute('src',scripts[i]);
HEAD.appendChild(s[i]);
}
}
在这里是把 <script> 标签动态的插入到页面中的 <head> 标签内部，并且加载完成后标签元素会被自动移除。
使用方法
这里声明了一个数组变量，里面包含了两个远程的JS文件地址（当然 <script> 标签调用脚本是支持跨域的）：
var scripts = [
"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js",
"http://wellstyled.com/files/jquery.debug/jquery.debug.js"
];
// 这两个文件分别是 jQuery 1.4.的库文件和 jQuery Debug 插件
// 然后你可以使用下面的方法调用并在成功后执行回调了。
parallelLoadScripts(scripts, function() {
/*
debug = new $.debug({
posTo : { x:'right', y:'bottom' },
width: '480px',
height: '50%',
itempider : '<hr>',
listDOM : 'all'
});
*/
console.log('脚本加载完成啦');
});相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是脚本加载后执行JS回调函数的方法的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
微信删除的人如何找回（简单教程告诉你如何恢复被删除的联系人）
May 01, 2024 pm 12:01 PM
而后悔莫及、人们常常会因为一些原因不小心将某些联系人删除、微信作为一款广泛使用的社交软件。帮助用户解决这一问题，本文将介绍如何通过简单的方法找回被删除的联系人。1.了解微信联系人删除机制这为我们找回被删除的联系人提供了可能性、微信中的联系人删除机制是将其从通讯录中移除，但并未完全删除。2.使用微信内置“通讯录恢复”功能微信提供了“通讯录恢复”节省时间和精力，用户可以通过该功能快速找回之前被删除的联系人，功能。3.进入微信设置页面点击右下角，打开微信应用“我”再点击右上角设置图标、进入设置页面，，
手机字体大小设置方法（轻松调整手机字体大小）
May 07, 2024 pm 03:34 PM
字体大小的设置成为了一项重要的个性化需求，随着手机成为人们日常生活的重要工具。以满足不同用户的需求、本文将介绍如何通过简单的操作，提升手机使用体验，调整手机字体大小。为什么需要调整手机字体大小-调整字体大小可以使文字更清晰易读-适合不同年龄段用户的阅读需求-方便视力不佳的用户使用手机系统自带字体大小设置功能-如何进入系统设置界面-在设置界面中找到并进入"显示"选项-找到"字体大小"选项并进行调整第三方应用调整字体大小-下载并安装支持字体大小调整的应用程序-打开应用程序并进入相关设置界面-根据个人
手机版龙蛋孵化方法大揭秘（一步一步教你如何成功孵化手机版龙蛋）
May 04, 2024 pm 06:01 PM
手机游戏成为了人们生活中不可或缺的一部分，随着科技的发展。它以其可爱的龙蛋形象和有趣的孵化过程吸引了众多玩家的关注，而其中一款备受瞩目的游戏就是手机版龙蛋。帮助玩家们在游戏中更好地培养和成长自己的小龙，本文将向大家介绍手机版龙蛋的孵化方法。1.选择合适的龙蛋种类玩家需要仔细选择自己喜欢并且适合自己的龙蛋种类，根据游戏中提供的不同种类的龙蛋属性和能力。2.提升孵化机的等级玩家需要通过完成任务和收集道具来提升孵化机的等级，孵化机的等级决定了孵化速度和孵化成功率。3.收集孵化所需的资源玩家需要在游戏中
golang函数动态创建新函数的技巧
Apr 25, 2024 pm 02:39 PM
Go语言提供了两种动态函数创建技术：closures和反射。closures允许访问闭包作用域内的变量，而反射可使用FuncOf函数创建新函数。这些技术在自定义HTTP路由器、实现高度可定制的系统和构建可插拔的组件方面非常有用。
C++ 函数命名中参数顺序的考虑
Apr 24, 2024 pm 04:21 PM
在C++函数命名中，考虑参数顺序至关重要，可提高可读性、减少错误并促进重构。常见的参数顺序约定包括：动作-对象、对象-动作、语义意义和遵循标准库。最佳顺序取决于函数目的、参数类型、潜在混淆和语言惯例。
如何选择手机膜，保护你的手机屏幕（选购手机膜的几大要点与技巧）
May 07, 2024 pm 05:55 PM
手机膜成为了必不可少的配件之一，随着智能手机的普及。延长其使用寿命，选择一款合适的手机膜可以保护手机屏幕。帮助读者选出最适合自己的手机膜、本文将介绍选购手机膜的几大要点与技巧。了解手机膜的材质及类型PET膜，TPU等、手机膜有多种材质，包括钢化玻璃。PET膜较为柔软、钢化玻璃膜具有较好的耐刮花性能，TPU则具有较好的防震性能。可以根据个人偏好及需求来决定，在选择时。考虑屏幕的保护程度不同类型的手机膜对屏幕的保护程度不同。PET膜则主要起到防刮花作用，钢化玻璃膜具有较好的耐摔性能。可以选择具有较好
excel函数公式大全
May 07, 2024 pm 12:04 PM
1、 SUM函数，用于对一列或一组单元格中的数字进行求和，例如：=SUM(A1:J10)。2、AVERAGE函数，用于计算一列或一组单元格中的数字的平均值，例如：=AVERAGE(A1:A10)。3、COUNT函数，用于计算一列或一组单元格中的数字或文本的数量，例如：=COUNT(A1:A10)4、IF函数，用于根据指定的条件进行逻辑判断，并返回相应的结果。
