jQuery 获取脚本答案

【问题标题】：jQuery getScriptjQuery 获取脚本
【发布时间】：2011-08-16 19:00:47
【问题描述】：

我目前无法使用几个必须以非常特定的顺序加载的 JavaScript 库。由于 jQuery 的 getScript() 是异步的，它开始非常快速地下载所有脚本，并在它们完成后执行它们。由于它们没有按顺序执行，因此我收到了来自库的多个错误。

很遗憾，我无法更改或修改这些库中的任何一个。我正在尝试做的是使用一种下载 JavaScript 库的方法，并在回调中让它自己调用，直到它完成所有库的加载。

这适用于第一个文件。当第二个文件出现时，它会在回调中丢失上下文，我不能再调用我的递归方法了。

有什么想法吗？

代码的配对版本：

function loadFiles (CompletedCallback) {
    var Files = getFiles(); // This is an array of js files to load
    var currentFileIndex = 0;

    function processFile (file) {
        $.getScript(file[currentFileIndex], $.proxy(function () {
            ++currentFileIndex;
            if (currentFileIndex === Files.length) {
                CompletedCallback();
            } else {
                processFile(Files[currentFileIndex]);
            }
        }, this);
    };

    processFile(Files[currentFileIndex]);
};

【问题讨论】：

你为什么使用$.proxy？你不是在匿名函数中引用this
这是我设置正确上下文的尝试，但它似乎没有改变任何东西。

标签： javascript jquery getscript

【解决方案1】：

我不确定您的代码有什么问题，但我会这样做：

function loadOrdered(files, callback) {
   $.getScript(files.shift(), function() {
       files.length
          ? loadOrdered(files, callback)
          : callback();
   });
}

编辑，更好的版本：

function loadOrdered(files, callback) {
   $.getScript(files.shift(), files.length
       ? function(){loadOrdered(files, callback);}
       : callback
   );
}

甚至更好，如果您不关心旧浏览器或自己实现 Function.prototype.bind（也支持绑定参数，而不仅仅是 this 上下文）：

function loadOrdered(files, callback) {
   $.getScript(files.shift(), files.length
       ? loadOrdered.bind(null, files, callback)
       : callback
   );
}

【讨论】：

我正在尝试让您的第二个选项起作用。它加载了两个 javascript 文件，但是当它在加载第二个文件后得到回调时，上下文完全消失了（我在 FireBug 中放置了一个断点，这从我需要的上下文到窗口的上下文）。
如果你需要保留上下文，你应该在将回调传递给loadOrdered时使用$.proxy，例如loadOrdered(['a.js', 'b.js'], $.proxy(func, context))
谢谢，我会试一试。由于您的代码已经传递了所有内容，因此我需要任何类型的上下文的唯一原因是从回调中调用 loadOrderer()，因为它认为在第二个回调发生时它不存在。
我也有同样的问题。当回调第二次发生时，它失去了触摸和查看文件和回调变量以及 loadOrdered 方法的能力。当我在 FireBug 中设置断点并查看时，它们就消失了。
我已经对其进行了测试，它在这里运行良好 (paste2.org/p/1589765)。我认为 loadOrderer() 没有理由不能访问自身……这可能与您的设置有关。你能展示其余的相关代码吗？

【解决方案2】：

你可以这样做同步调用：

$.ajaxSetup({async: false});
$.getScript('library.js');
$.ajaxSetup({async: true});

【讨论】：

使用同步加载可能会阻止 UI 交互和页面上运行的其他脚本。如果在 Web Worker 中使用，这可能是一个很好的解决方案，虽然
我想过这个问题，但我真的不想让 UI 停下来。好主意！
不，我去看看。谢谢！
请注意，这将禁用浏览器对加载文件的缓存。我建议添加cache:true。您也可以在 jQuery 1.12.0 或更高版本上使用它：$.getScript({url: "library.js",cache: true, async:false})

【解决方案3】：

简单形式：

function getScript(url){ $.ajax({url: url, type: 'post', async: false}); }

用法：

getScript(a_url);

【讨论】：