javascript - 使用 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

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

第一个 Deferred 对象在 /script.js 完成加载时被解析，而不是在所有脚本都完成加载时。此时，加载 /scripts2.js 的 doneCallback 被调用，但是 $.when(...) 的 doneCallback 也已经被调用，因为两个 Deferred 对象它已通过并在那时得到解决。

您应该将 $(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");
});