溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了如何實現JavaScript文件的同步和異步加載，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
同步加載
可在html文件里以<script>標簽插入，這是初學時最基本的方式。
準備兩個js文件如下：
calc1.js
console.log('calc1 loading begin')
function add(...args) {
return args.reduce((currentTotal, i) => currentTotal + i, 0);
}
console.log('calc1 loading end')calc2.js
console.log('calc2 loading begin')
console.log(add(1,2,3))
console.log('calc2 loading end')calc2.js 是依賴calc1.js的。
html文件如下：
<body> <script src="calc1.js"> </script> <script src="calc2.js"> </script> </body>
這種方式下，文件加載是同步的。即calc1.js加載完成后，才加載calc2.js，所以保證了calc2.js總能正確地調用calc1里的add函數。在Chrome里的調試結果如下：
但同步加載的缺點也明顯，如果有多個文件的時候，全部加載時間會很長，而且阻塞用戶界面響應。
通過Script Element異步加載
異步加載的優點是，能夠同時加載多個js文件，而且由于是異步，不會阻塞用戶界面，用戶體驗好。當然缺點是，不能保證有依賴關系的文件的加載順序。
html 代碼
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var script1 = document.createElement('script');
script1.src='calc1.js';
script1.type='text/javascript';
var script2 = document.createElement('script');
script2.src='calc2.js';
script2.type='text/javascript';
document.getElementsByTagName('head')[0].appendChild(script1).appendChild(script2);
</script>
</head>在Chrome里的調試結果有時候能正確的輸出如下：
但有時候由于clac1.js沒有被先加載，calc2.js執行時會報錯。
那么我們就得需要解決加載順序問題，保證calc1.js先加載。
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function loadScript(file, callbackFn) {
var script = document.createElement('script');
script.src= file;
script.type='text/javascript';
// 監聽onload時間，當前js文件加載完成后，再加載下一個
script.onload = callbackFn;
document.getElementsByTagName('head')[0].appendChild(script)
}
loadScript('calc1.js', function () {
loadScript('calc2.js');
} );
</script>
</head>這樣就能永遠輸出正確結果了。
通過 AJAX 加載JS文件
<script>
function loadScript(file, callbackFn) {
var xhr = new XMLHttpRequest();
xhr.open('get', file, true);
// for IE
if (xhr.onreadystatechange) {
xhr.onreadystatechange = function () {
console.log(xhr.readyState, xhr.status);
if (xhr.readyState == 4) {
if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
insertScriptText(xhr.responseText);
if (callbackFn) {
callbackFn();
}
}
}
}
} else {
xhr.onload = function () {
insertScriptText(xhr.responseText);
if (callbackFn) {
callbackFn();
}
}
}
xhr.send(null);
}
function insertScriptText(scriptText) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.text = scriptText;
document.body.appendChild(script);
}
loadScript('calc1.js', function () {
loadScript('calc2.js');
});
</script>也能正確的輸出結果。
感謝你能夠認真閱讀完這篇文章，希望小編分享的“如何實現JavaScript文件的同步和異步加載”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
