0

我有 2 个 javascript 文件。让我们称之为 script1.js 和 script2.js。我想确保它们按顺序执行（首先是 script1.js，然后是 script2.js）。所以我将它们的 async 属性都设置为 false 。然而，在特定情况下，这不会发生。如果 script1 包含同步 xhr 调用，则执行顺序颠倒，首先执行 script2，然后执行 script1。我打开了一个针对 firefox 的错误，但他们说 sync xhr 调用再次旋转事件循环，因此即使第一个脚本尚未完成，它仍会开始执行第二个脚本。我无法避免在 javascript 文件中同步 xhr。以前有人遇到过这个问题吗？请让我知道是否有任何替代方法可以执行此操作或确保 javascript 文件执行顺序。

这是可以尝试的示例。

以下是在 oder 中加载 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(){
})();

实际结果：

第一次执行顺序是正确的。我在萤火虫中看到以下内容

script1 evaluating

GET http://10.194.176.9/html/js/script3.js

script1 finished executing

script2 evaluating

script2 finished executing

但是第二次以后，一旦所有脚本都被缓存，我总是会看到以下顺序。在这里你会看到 script2 和 script1 的执行顺序是相反的。

script1 evaluating

GET http://10.194.176.9/html/js/script3.js

script2 evaluating

script2 finished executing

script1 finished executing

预期成绩：

script1 和 script2 的执行顺序不应该颠倒，因为我使用的是 async=false。

4

0 回答 0