私は2つのjavascriptファイルを持っています。script1.js と script2.js としましょう。それらが順番に実行されるようにしたいです(最初にscript1.js、次にscript2.js)。そのため、両方の async 属性を false に設定しました。ただし、特定のシナリオでは、これは発生しません。script1 に sync xhr 呼び出しが含まれている場合、実行順序が逆になり、script2 が最初に実行され、次に script1 が実行されます。Firefox に対してバグを報告しましたが、同期 xhr 呼び出しがイベント ループを再度スピンするため、最初のスクリプトが完了していないにもかかわらず、2 番目のスクリプトの実行が開始されるとのことでした。javascript ファイルでこれらの sync xhr を回避する方法はありません。以前にこの問題に直面した人はいますか? これを行う別の方法があるかどうか、またはJavaScriptファイルの実行順序を確保する方法があるかどうかを教えてください。
これを試すことができる例を次に示します。
以下は、script1 と script2 を順番にロードする JavaScript メソッドです。
function loadJavascript() {
var script1 = document.createElement("script");
script1.async=false;
script1.src = "/html/js/script1.js";
script1.finished = false;
script1.onload = script1.onreadystatechange = function() {
if ((script1.readyState && script1.readyState != "complete" && script1.readyState != "loaded") || script1.finished) return;
script1.onload = script1.onreadystatechange = null;
console.log("script1 finished executing");
script1.finished =true;
};
var script2 = document.createElement("script");
script2.async=false;
script2.src = "/html/js/script2.js";
script2.finished = false;
script2.onload = script2.onreadystatechange = function() {
if ((script2.readyState && script2.readyState != "complete" && script2.readyState != "loaded") || script2.finished) return;
script2.onload = script2.onreadystatechange = null;
console.log("script2 finished executing");
script2.finished =true;
};
var head = document.head;
head.appendChild(script1);
head.appendChild(script2);
}
script1.js
(function(){
console.log("script1 evaluating");
var http = new XMLHttpRequest();
http.open('GET', '/html/js/script3.js', false);
var data = http.send(null);
eval(http.responseText);
})();
script2.js
(function(){
console.log("script2 evaluating");
})();
script3.js
(function(){
})();
実績:
初めて実行順序が正しかった。私はfirebugで次のことを見ます
script1 evaluating
GET http://10.194.176.9/html/js/script3.js
script1 finished executing
script2 evaluating
script2 finished executing
ただし、すべてのスクリプトがキャッシュされると、2 回目以降は常に次の順序で表示されます。ここでは、script2 と script1 の実行順序が逆になっていることがわかります。
script1 evaluating
GET http://10.194.176.9/html/js/script3.js
script2 evaluating
script2 finished executing
script1 finished executing
予想された結果:
async=false を使用しているため、script1 と script2 の実行順序を逆にする必要はありません。