你好，我有兩個 JavaScript 檔案分別是 JS01.js , JS02.js。
JS02.js 檔案必須引用 JS01.js。
JS01.js 的檔案內容如下:
window.alert("Hello JS01");
JS02.js 的檔案內容如下：
document.write(unescape("%3Cscript src='JS01.js' type='text/javascript'%3E%3C/script%3E"));
window.alert("Hello JS02");
我現在遇到的問題是，
JS02 的程式 會比 JS01 的 程式先執行，也就是會先出現 "Hello JS02" 才會出現
"Hello JS01"。
我發現 只要在 JavaScript 檔案中崁套另一個 JavaScript 檔案的時候，就會出現這種情況。
程式的要求是，必須讓 JS01 先執行完成之後，才可以執行 JS02。
有人知道該如何解決這個問題嗎?
感謝回覆。
已邀請的邦友 {{ invite_list.length }}/5
不要使用document.write。使用他會造成DOM reflow，這個動作會在目前執行的javascript程式區塊（JS02）結束後才會執行，然後才執行DOM reflow的結果，也就是JS01。所以執行的順序不如你的預期。
如果有模組依賴性，通常會建議使用RequireJS，不過我怕你還需要更熟悉Javascript與瀏覽器的運作，以及html, DOM等知識，再來使用比較好。
我這樣講不太對。基本上，除非你知道你在做什麼，不然盡量使用DOM來操作html，不要使用document.write()。
至於DOM reflow，只要你動到DOM，不論用什麼方式都會發生。這個過程是非同步的，所以即使你改用appendChild把javascript node掛到DOM上，問題還是一樣。
一個簡單的作法：
<pre class="c" name="code">
<!doctype html>
<script>
function loadScript(url, cb) {
var h = document.getElementsByTagName('head')[0];
var n = document.createElement('script');
n.src = url;
n.type = 'text/javascript';
if(!!cb && typeof cb === 'function') {
n.addEventListener('load', function() {
cb();
h.removeChild(n);
}, false);
}
h.appendChild(n);
}
</script>
<script>
loadScript('test930a.js', function() {
loadScript('test930b.js');
});
</script>
test930a.js長這樣：
<pre class="c" name="code">
alert('js01');
function js02() {alert('js02')}
test930b.js使用到定義在test930a.js中的函數js02：
<pre class="c" name="code">
js02();
這樣就會依序跑出'js01'以及'js02'的訊息。
iThome鐵人賽
看影片追技術