iT邦幫忙

0

兩個JS檔案執行順序問題

目前有兩個JavaScript檔案 有分別在第一和第二個JS裡面下console.log(1),console.log(2)
第一個有Ready Function 裡面含有Ajax
執行結果都是 2 -> 1
要如何在有AJAX和不動到第二個JS檔案的情況底下,強制讓他先執行完第一個在執行完第二個?

大河 iT邦新手 5 級 ‧ 2021-09-22 11:58:05 檢舉
js 的 async function可以參考一下
https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements/async_function
ajax 主要圍繞在 promise 的概念,
以上是個人的小小見解
P.S 最近也才剛把 promise 跟 async function的運用釐清而已 ;D

2 個回答

3
Hankz
iT邦新手 3 級 ‧ 2021-09-22 12:02:25
最佳解答

所謂的Ajax就是非同步請求
requst發出去後不會等回傳
就繼續執行後面的程式碼
所以永遠都2 > 1

正常的方式是在ajax回傳後,再調用2.js裡的function
但看起來你的2.js是直接callconsole.log(2)
只要載入就會執行,又不能改...
那就只能在回傳後,才載入js檔了吧
有jQuery:

$.getScript("2.js");

沒有jQuery:

var head= document.getElementsByTagName('head')[0]; 
var script= document.createElement('script'); 
script.type= 'text/javascript'; 
script.src= '2.js'; 
head.appendChild(script); 

參考資料

想請問一下
照您這樣子做的有發現一個問題
就是第三個第四個的JS檔案會出現
ERR_ABORTED 404 (Not Found)

Hankz iT邦新手 3 級 ‧ 2021-09-22 13:28:20 檢舉

恩...我猜你應該是在寫js檔案路徑的時候
依然是寫相對於index.html的路徑
但是實際上應該要寫相對於1.js的路徑

例如你的資料夾結構為:
index.html
js/1.js
js/2.js

原本寫法(index.html):

<script src="js/2.js"></script>

改用ajax回傳後載入(1.js):

var head= document.getElementsByTagName('head')[0]; 
var script= document.createElement('script'); 
script.type= 'text/javascript'; 
script.src= 'js/2.js'; // 實際上要寫2.js路徑才會對
head.appendChild(script);
1
frank575
iT邦新手 4 級 ‧ 2021-09-22 12:04:42

先假設你的 script 是使用 標籤按順序引入

<script src="js1.js"></script>
<script src="js2.js"></script>

那麼你可以把代碼改成以下這個樣子

<!-- 在 js1.js 內使用 ajax callback 產出 js2.js script 標籤後放到 html 內 -->
<script src="js1.js"></script>
// callback 後將 script 丟到 body 中
const script = document.createElement("script");
script.src = "src/js2.js";
document.body.append(script);

範例

可以查看 console,執行順序會是 js1 執行 > js2 執行

我要發表回答

立即登入回答