Загрузка сценариев асинхронно с использованием getScript

Question

Я хочу использовать функцию из пути /js/testscript.js, /js/testscript.js зависит от /script5.js, но testscript.js загрузить после вызова $(this).testscript();
Что я делаю неправильно? Сценарии зависимы.

$.when
(
    $.getScript('/script.js').done(function() {
          $.getScript('/script2.js'),
          $.getScript('script3.js').done(function() {
          $.getScript('/script4.js').done(function() {
            $.getScript('/script5.js').done(function() {
                $.getScript( "/js/testscript.js" ).done(function() {
                  console.log("LOADED 2");  
                })
            })
          })
        })
    }),
    $.Deferred(function(deferred) {
        $( deferred.resolve );
    })
).done(function() {
    console.log("TEST");
    $( ".test" ).each(function() {
            console.log("LOADED 1");
            $(this).testscript(); //function from /js/testscript.js
    });
});

Answer 1

Второй Отложенный объект становится разрешенным, как только DOM заканчивает загрузку, он не ждет методов getScript() (так как те теоретически могут быть выполнены намного позже, поэтому они не получают специальной обработки).

Первый отложенный объект становится разрешенным, когда /script.js завершает загрузку, а не после завершения загрузки всех скриптов. На этом этапе DoneCallback для загрузки /scripts2.js называется, но doneCallback для $.when(...) также уже вызывается, поскольку оба отложенных объекта, которые были переданы, разрешаются в этот момент.

Вы должны поставить $(this).testscript(); обратный вызов как DoneCallback для getScript("/js/testscript.js")не для when(...) утверждение, как это:

$.when(
  $.getScript('/script.js').done(function() {
    $.getScript('/script2.js'),
    $.getScript('script3.js').done(function() {
      $.getScript('/script4.js').done(function() {
        $.getScript('/script5.js').done(function() {
          $.getScript( "/js/testscript.js" ).done(function() {
            console.log("LOADED 2");
            $( ".test" ).each(function() {
              console.log("LOADED 1");
              $(this).testscript(); //function from /js/testscript.js
            });
          })
        })
      })
    })
  }),
  $.Deferred(function(deferred) {
    $( deferred.resolve );
  })
).done(function() {
  console.log("TEST");
});

Answer 2

$.getScript кажется, возвращает Promise так что вы можете загружать независимые скрипты параллельно, используя Promise.all затем используйте цепочку обещаний для загрузки зависимых скриптов.

В следующем примере bar.js зависит от foo.js в то время как остальные не имеют никаких зависимостей между ними:

Promise.all([
  $.getScript('/script1.js'),
  $.getScript('/script2.js')
])
.then(() => $.getScript('/foo.js'))
.then(() => $.getScript('/bar.js'))
.then(() => {
  console.log('All scripts loaded')
})
.catch(console.error)