Question

除了jQuery的AJAX函数之外，我对“异步” JavaScript的理解非常有限。

我创建了一个系统，我将外部Javascript文件作为“模块”加载，以保持整洁和轻量级。这样做的主要灵感和实现可以找到here。

因此，例如，名为foo.js的JS文件可能包含以下具有set属性的JS对象：

var bar = { 
   a:1,
   b:2
}

加载此外部文件后，可通过window.bar访问该文件。因此，在浏览器的Developer Tool JS控制台中键入window.bar.a（或者bar.a）应该返回：

当我尝试将bar对象分配给变量时，我的问题出现了，这通常会在外部JS模块加载之前同步解析，并且通常包含undefined - boo！

这是我到目前为止的尝试：基本上返回对象实例，如果它已经存在于window中，否则等待它被加载然后返回它（理想地）：< / p>

var val = getInstance('bar');

调用我的功能：

function getInstance(name) {
    if(typeof window[name] === 'object'){
        return window[name];
    } else { 
        $(window).on('load', window[name], function() { 
            return window[name];
        });
    }
}

当我undefined时，当然会返回console.log(val)。

我知道这里有一个事实，我希望对象bar与val异步通过。然后，我可以继续通过bar开始引用val实例（即val.a == 1）。

我已经努力浏览jQuery的延迟对象（$.Deferred） - 我的理解消失了，但我的时间紧迫，我想知道现在而不是几天下来如果我在bar获取和val的实例的正确轨道上就行了。

非常感谢任何帮助，指示或评论！

Answer 1

我认为Kevin B给了你正确答案。

考虑到您的时间表和对主题的不熟悉，我建议您连接和缩小JavaScript文件而不是执行异步模块。

否则，您需要花时间了解如何使用像require或yepnope这样的模块加载器。您引用的文章并未涉及同时加载多个模块，这可能是您的要求。您对异步脚本加载采取的任何路径都将要求您利用回调来组织代码执行的顺序。

Answer 2

var ajaxRequests = [];
var scriptUrlCollection = ['script1.js', 'script2.js', 'script3.js'];
$(scriptUrlCollection).each(function( index, url ) {
    ajaxRequests.push($.getScript(url));
});
$.when.apply($, ajaxRequests).done(function() { / *execute your code */);

您可以使用ajax加载脚本，然后在所有脚本完成后执行代码，这要归功于延迟对象。

每个ajax请求都返回一个jQuery延迟对象，我们将其添加到ajaxRequests数组中。解析所有这些延迟对象后，将执行done()方法。

Answer 3

如果我走在正确的轨道上，我现在想知道而不是几天下来

是。 Promises（就像jQuery的Deferred实现一样）是可行的方法。

获取bar的实例和val

不完全是。 JS中的Promise不透明，它们更像是代理对象。你还需要一个回调：

getInstance("bar").then(function(val) {
    // this function is executed asynchronously
    // and the `bar` instance is available here
});

返回一个对象＆＃34;实例＆＃34;通过JavaScript异步

3 个答案: