如果使用 getScript 加载 Fancybox 脚本将失败

Question

我必须创建一个可以集成到任何外部网页的网上商店。 （就像埃克维德一样。） 为此，我必须创建一个数组，在其中列出必须包含/执行的脚本名称。在该列表中，有fancybox，就像其他插件一样。其他插件可以通过 getScript 函数加载，但 fancybox 会停止所有正在运行的脚本而不会出现任何错误。 不知道为什么，怎么办。 请在这方面提供帮助。 谢谢

engineConfig = new Array(
    '/jquery.ui.js',
    '/fancybox.js',
    '/modernizr.js',
    '/lightbox.js',
    '/tinyscrollbar.js',
    '/base64.js',
    '/md5.js'
);


function includeEngineParts() {
    if(engineConfig.length > 0) {
        // global variables...
        var src = strShopApiEngineDomain+strShopApiEngineGuiPath+sep+ext+engineConfig[0]+shopApiLoadRnd;
        engineConfig.shift();
        $.getScript(src, function(){
            includeEngineParts();
        });
    } else {
        doSomething();
    }
}

Answer 1

根据jQuery Documentation，$.getScript() 函数是以下 AJAX 调用的简写：

$.ajax({
    url: url,
    dataType: "script",
    success: success
});

因此，如果数组中的任意个文件加载失败，成功回调不会触发下一个文件的加载。有 3 种方法可以解决此问题。

1. 首先，尝试修复阻止脚本继续执行的错误。然而，这并不是最终的解决方案，因为这些错误可能随时发生，而且您不希望代码被破坏，是吗？

2. 您可以保持一切原样，而不是使用回调函数来触发递归调用，您可以在脚本加载过程启动后直接调用该函数。唯一的缺点是 JS 在加载下一个之前不会等待脚本加载。所以，替换：

   $.getScript(src, function(){
       includeEngineParts();
   });
   

   与：

   $.getScript(src);
   includeEngineParts();
   

3. 使用带有属性complete 的ajax 调用代替$.getScript()，无论请求是否成功，它总是在请求完成后执行。这样我们可以确保脚本以相同的顺序加载，一个接一个，如果它们完全加载的话。

   $.ajax({
       url: src,
       dataType: "script",
       complete: includeEngineParts
   });