使用getScript异步加载脚本

Question

我希望路径/js/testscript.js, /js/testscript.js中的use函数依赖于/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 to load /scripts2.js，但$.when(...)的doneCallback也已被调用，因为被传递的两个延迟对象都是在此时解析的。

应该将$(this).testscript();回调作为getScript("/js/testscript.js")的doneCallback，而不是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)