Загрузка сценариев асинхронно с использованием 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(...), поскольку оба отложенных объекта, которые были переданы, разрешаются в этот момент.

Вы должны поставить *Обратный вызов 1008 * как 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)