jQuery 延迟对象答案

【问题标题】：jQuery Deferred objectsjQuery 延迟对象
【发布时间】：2014-07-01 09:51:47
【问题描述】：

我正在开发一个“单页应用程序”，并且正在寻找一种方法来确保完成页面渲染。

我的应用流程是这样的：

绘制导航标记
添加一个指示正在获取页面内容的叠加层
实际加载内容并注入到页面内容区

现在这是我的不足之处：

页面内容被注入后，我初始化标记依赖的小部件（引导程序、自定义事件等）。

这意味着，页面内容仍然可以被操纵，因此，我想知道是否我可以使用 jQuery 的延迟对象（以及如何使用）作为函数队列，其中的函数可以执行异步操作以及普通的旧同步函数。

使用它，我希望能够判断所有小部件何时已初始化，然后删除页面加载指示器。

【问题讨论】：

是的，你可以使用 Promise 来知道几个异步函数何时完成，但是你到底想让我们回答什么，没有代码只是一个比较模糊的问题？
小部件提供什么反馈？他们是否在完成初始化时向您承诺？
我已经更新了我的问题，我正在寻找这种用法的示例，甚至可能是一篇好文章来阅读，因为我找不到帮助我掌握这个概念的文章。
@Bergi 目前没有，我意识到代码重构是有序的

标签： javascript jquery queue

【解决方案1】：

您可以使用 jQuery 的延迟对象来创建异步函数队列。

这是一个示例实现（由 jsfiddle/coffeeandcode 提供）：

var Queue = function() {
    var lastPromise = null;

    this.add = function(obj, method, args, context) {
        var methodDeferred = $.Deferred();
        var queueDeferred = this.setup();
        if(context === undefined) { context = obj; }

        // execute next queue method
        queueDeferred.done(function() {


            // call actual method and wrap output in deferred
            setTimeout(function() {
                obj[method].apply(context, args);
                methodDeferred.resolve();
            }, 100);


        });
        lastPromise = methodDeferred.promise();
    };

    this.setup = function() {
        var queueDeferred = $.Deferred();

        // when the previous method returns, resolve this one
        $.when(lastPromise).always(function() {
            queueDeferred.resolve();
        });

        return queueDeferred.promise();
    }
};

您可以在此处查看正在运行的代码：

http://jsfiddle.net/coffeeandcode/yg9P6/

【讨论】：