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

$.getScript好像是return一个Promise so you can load non-dependent scripts in-parallel using 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)

Answer 2

第二个 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");
});

使用 getScript 异步加载脚本

Load scripts asynchronously using getScript

javascript

jquery

deferred

getscript

.when