JavaScript async & defer: запустить скрипт асинхронно - PullRequest
Новая
       0

JavaScript async & defer: запустить скрипт асинхронно

0 голосов
/ 13 ноября 2018

Насколько мне известно, в элементе script атрибут async позволяет скрипту загружаться асинхронно (аналогично изображениям), в то время как defer заставляет скрипт ждать завершения до выполнения.

Предположим, у меня есть два сценария для включения: 

<script src="library.js"></script>
<script src="process.js"></script>

Я бы хотел, чтобы они оба выполнялись асинхронно, и я бы хотел process.js, чтобы дождаться окончания, чтобы начать обработку.

Есть ли способ заставить library.js сценарий выполнить асинхронно?

Примечание

Я вижу, что, похоже,Некоторое несоответствие между различными онлайн-ресурсами относительно фактической роли атрибута async.

MDN & WhatWG предполагает, что это означает, что сценарий должен выполняться асинхронно.Другие онлайн-ресурсы предполагают, что он должен загружать асинхронно, но все равно блокирует рендеринг при его выполнении.

Ответы [ 2 ]

0 голосов
/ 13 ноября 2018

Я нашел Последовательная загрузка скриптов в JavaScript , которая может вам помочь: 

(function(){
  
  //three JS files that need to be loaded one after the other
  var libs = [
    'https://code.jquery.com/jquery-3.1.1.min.js',
    'https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js',
    'https://cdnjs.cloudflare.com/ajax/libs/underscore.string/3.3.4/underscore.string.js'
  ];
  
  var injectLibFromStack = function(){
      if(libs.length > 0){
        
        //grab the next item on the stack
        var nextLib = libs.shift();
        var headTag = document.getElementsByTagName('head')[0];
        
        //create a script tag with this library
        var scriptTag = document.createElement('script');
        scriptTag.src = nextLib;
        
        //when successful, inject the next script
        scriptTag.onload = function(e){
          console.log("---> loaded: " + e.target.src);
          injectLibFromStack();
        };    
        
        //append the script tag to the <head></head>
        headTag.appendChild(scriptTag);
        console.log("injecting: " + nextLib);
      }
      else return;
  }
  
  //start script injection
  injectLibFromStack();
})();
0 голосов
/ 13 ноября 2018

Оба параметра defer и async влияют на выполнение сценария, а не на загрузку сценария. Я думаю, что путаница возникает из-за того, что некоторая документация немного неаккуратна с терминами, а термин загружен неясно, относится ли он к извлечению ресурса или его выполнению.

Чтобы library.js работал асинхронно, не дожидаясь загрузки документа, используйте атрибут async, а process.js, чтобы дождаться анализа документа, используйте defer: 

<script src="library.js" async></script>
<script src="process.js" defer></script>

Обратите внимание, что library.js не гарантированно будет работать до process.js, хотя, вероятно, будет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...