目前有兩個JavaScript檔案 有分別在第一和第二個JS裡面下console.log(1),console.log(2)
第一個有Ready Function 裡面含有Ajax
執行結果都是 2 -> 1
要如何在有AJAX和不動到第二個JS檔案的情況底下，強制讓他先執行完第一個在執行完第二個?
已邀請的邦友 {{ invite_list.length }}/5
所謂的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)
恩...我猜你應該是在寫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);
先假設你的 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 執行
iThome鐵人賽
看影片追技術