Загрузка JavaScript в зависимости от ранее асинхронно загруженного JavaScript

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

script2.js зависит от script1.js. Так script1.jsкак не загружается полностью, когда script2.jsвыполняется, это не работает. Как это исправить?

Edit: я не могу удалить asyncатрибут, и я могу только изменить содержимое script2.js.

2 ответа

  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
    });
    

    Это не идеально, но это сработает.

  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...   
    }