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

第二个Deferred对象在DOM完成加载后立即得到解析，它不会等待getScript（）方法（因为理论上可以稍后执行这些方法，因此它们不会受到特殊对待）。

第一个Deferred对象在/script.js完成加载时解析，而不是在所有脚本均完成加载时解析。到那时，调用了/scripts2.js的doneCallback来加载，但是$.when(...)的doneCallback也已经被调用，因为传递给它的两个Deferred对象都在该点被解析。

您应将$(this).testscript();回调作为getScript("/js/testscript.js")而不是when(...)语句的doneCallback，例如：

$.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并行加载非依赖性脚本，然后使用promise chaining来加载相关脚本。

在以下示例中，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)

使用getScript异步加载脚本

2 个答案: