Question

<script src="script1.js" async></script>
<script src="script2.js"></script>

script2.js取决于script1.js。由于script1.js在执行script2.js时未完全加载，因此无法正常工作。如何解决这个问题？

修改：我无法移除async属性，我只能修改script2.js的内容。

Answer 1

如果您的第一个脚本必须是异步的，那么最好还将第二个脚本设为异步。

一个天真的解决方案是定期查找第一个脚本可能导出的全局变量。

假设script1将script1export附加到窗口，您可以执行以下操作：

// Regularly check test, and once it is true, call callback.
function waitFor(test, callback, checksPerSec){
   if(test()){
     callback();
   } else {
     checksPerSec = checksPerSec || 10;
     setTimeout(function(){
       waitFor(test, callback, checksPerSec);
     }, 1000 / checksPerSec);
   }
}

waitFor(function(){
  return "script1export" in window;
}, function(){
   // script 2 content
});

这不太理想，但它会起作用。

Answer 2

// script 1
if (!window.myObj1){
    window.myObj1 = script1Obj1;
}

// script 2
if (!window.myObj2){
    window.myObj2 = script2Obj2;
}


// script 1 & script 2

if (window.myObj1 && window.myObj2){
    // run...   
}

根据以前异步加载的JavaScript加载JavaScript

2 个答案: