JS 스크립트가 로드된 후 해당 콜백 함수가 실행됩니다.
- php中世界最好的语言원래의
- 2018-03-17 13:19:471330검색
이번에는 JS 스크립트를 로드한 후 해당 콜백 함수를 실행하는 작업을 가져오겠습니다. JS 스크립트를 로드한 후 해당 콜백 함수를 실행하는 주의 사항은 무엇입니까? 살펴보자.
우리는 프로젝트에서 종종 이런 문제에 직면합니다. js 스크립트가 로드되면 해당 작업이 실행됩니다. 그러나 많은 친구들은 우리가 로드하려는 js 파일이 로드되지 않은 경우 판단하는 방법을 모를 수 있습니다. , js 파일의 함수 호출은 성공하지 못할 것입니다. 이번 글에서는 js 파일을 성공적으로 로딩한 후 해당 콜백 작업을 실행하는 방법을 주로 설명합니다.
기본 아이디어
<script> 요소를 동적으로 생성한 다음 src 속성을 변경하여 스크립트를 로드할 수 있지만 스크립트 파일이 로드되었는지 어떻게 알 수 있나요? ? 스크립트를 호출하기 전에 일부 함수를 로드해야 하기 때문입니다. IE 브라우저에서는 <script> 요소의 onreadystatechange를 사용하여 로딩 상태의 변경 사항을 모니터링하고 스크립트가 로드되었는지 여부를 판단할 수 있습니다. ReadyState가 로드되었거나 완료되었습니다. IE가 아닌 브라우저에서는 onload를 사용하여 스크립트가 로드되었는지 직접 확인할 수 있습니다. <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('脚本加载完成啦');
});원리는 매우 간단합니다. 이 두 가지 간단한 원칙을 바탕으로 두 가지 기능으로 변경했습니다. 직렬 로딩과 병렬 로딩.
여러 JS 파일 경로가 포함된 배열이 전달되면 직렬 로드 기능은 첫 번째 스크립트 파일 로드부터 시작하고 각 파일 로드가 성공한 후 다음 스크립트 로드를 시작합니다. 콜백 함수는 모든 로딩이 완료된 후 실행됩니다. 병렬 로딩은 모든 스크립트 파일을 처음부터 로드합니다. 즉, 모든 로딩이 완료되면 콜백 함수가 실행됩니다.
rrreee
<script> 태그는 페이지의 <head> 태그에 동적으로 삽입되며, 로드 후 태그 요소가 자동으로 이동됩니다. 제거가 완료되었습니다. 🎜🎜🎜두 개의 원격 JS 파일 주소를 포함하는 배열 변수가 여기에 선언됩니다(물론 <script> 태그 호출 스크립트는 교차 도메인을 지원합니다): 🎜rrreee 🎜🎜🎜🎜🎜이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! 🎜🎜추천 자료: 🎜🎜🎜javascript 모듈 로더는 어떻게 실행되나요? 🎜🎜🎜🎜🎜WeChat 웹 측에서 역강제 새로 고침을 구현하는 방법🎜🎜🎜🎜🎜React BootStrap 프레임워크를 사용하는 방법🎜🎜🎜위 내용은 JS 스크립트가 로드된 후 해당 콜백 함수가 실행됩니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!