ホームページ > 記事 > ウェブフロントエンド > スクリプトロード後にJSコールバック関数を実行するメソッド
スクリプトロード後にJSコールバック関数を実行するメソッド
- php中世界最好的语言オリジナル
- 2018-04-12 15:32:541575ブラウズ
今回は、スクリプトロード後にJSコールバック関数を実行する方法について説明します。スクリプトロード後にJSコールバック関数を実行する際の注意点は何ですか。見てみましょう。 プロジェクトではこの問題によく遭遇します。js スクリプトがロードされると、対応するタスクが実行されますが、ロードする js を判断する方法がわからない人も多いかもしれません。 ファイルがロードされているかどうか。ロードされていない場合、js ファイル内の関数の呼び出しは成功しません。この記事では主に、js ファイルの読み込みに成功した後、対応するコールバック タスクを実行する方法について説明します。
基本的な考え方
を動的に作成して読み込みステータスの変化を監視し、readyState が読み込まれているか完了しているかを判断することでスクリプトが読み込まれているかどうかを判断できます。 IE 以外のブラウザでは、onload を使用して、スクリプトが読み込まれているかどうかを直接判断できます。<script> 元素，然后通过更改它的 src 属性来加载脚本，但是怎么知道这个脚本文件加载完成了呢？因为有些函数需要在脚本加载完成才能调用。IE 浏览器中可以使用 <script> 元素的 onreadystatechange
動的スクリプトの簡単な例 簡単な実装プロセスは次のとおりです:
// 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)
原理は非常に単純です。これらの 2 つの単純な原理に基づいて、シリアル ロードとパラレル ロードという 2 つの関数に変更しました。
シリアルおよびパラレル動的スクリプト 複数の JS ファイル パスを含む配列が渡されると、シリアル ロード関数は最初のスクリプト ファイルのロードから開始され、すべてのロードが成功するたびに次のスクリプト ファイルのロードを開始します。コールバック関数が実行されます。並列ロードでは、すべてのスクリプト ファイルが最初からロードされます。つまり、すべてのロードが完了すると、コールバック関数が実行されます。
りーここでは
タグが内側に配置されており、読み込み完了後にタグ要素は自動的に削除されます。<script> 标签动态的插入到页面中的 <head>
使い方 ここでは、2 つのリモート 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>この記事のケースを読んだ後は、この方法をマスターしたと思います。さらに興味深い情報 他の関連記事については、php 中国語 Web サイトをフォローしてください。
推奨読書:
IEのeasyui日付と時刻ボックスの互換性に対処する方法readlineがコンテンツを行ごとに読み書きする方法以上がスクリプトロード後にJSコールバック関数を実行するメソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。