Question

我正在尝试延迟加载某个网站的资产。我对承诺很新，但他们似乎在这方面非常有帮助。具体来说，我已经创建了下面的方法来下载HTML和CSS文件，然后翻转一个KnockoutJS observable，表明该部分可用。该方法如下所示：

function delayDownloadAssets(sectionName) {
var htmlRequest = $.ajax({ url: 'http://www.example.com/' + sectionName + '.html' }),
cssRequest = $.ajax({ url: 'http://www.example.com/' + sectionName + '.css'  });

$.when(firstRequest, secondRequest).done(function (firstResponse, secondResponse) {
    //Insert HTML assets and CSS assets into DOM
    app.sections[sectionName].enabled(true);
});
}

然后我可以调用该方法几次：

delayDownloadAssets("Section1");
delayDownloadAssets("Section2");
delayDownloadAssets("Section3");

到目前为止，这么好。但我想以类似的方式包装所有三个部分下载调用，以便我可以采取行动。类似的东西：

$.when(delayDownloadAssetsCall1, delayDownloadAssetsCall2,delayDownloadAssetsCall3).done(function () {
    alert('Web site download is entirely complete!');
});

我希望这个问题很明确，但如果需要澄清，请告诉我。谢谢！

Answer 1

如果您只返回$ .when结果，它应该按原样运行：

function delayDownloadAssets(sectionName) {
    var htmlRequest = $.ajax({ url: 'http://www.example.com/' + sectionName + '.html' }),
        cssRequest = $.ajax({ url: 'http://www.example.com/' + sectionName + '.css'  });

    //add return here
    return $.when(firstRequest, secondRequest).done(function (firstResponse, secondResponse) {
        //Insert HTML assets and CSS assets into DOM
        app.sections[sectionName].enabled(true);
    });
}

Answer 2

按照Esailija的说明编写delayDownloadAssets，您可以更进一步：

function loadSections(sections) {
    return $.when.apply(null, sections.map(delayDownloadAssets));
}

请致电如下：

var sections = ["Section1", "Section2", "Section3"];

loadSections(sections).then(function() {
    //Web site download is entirely complete!
});

Answer 3

为什么不直接用完成的函数链接3。

即。第一个呼叫的完成功能呼叫第二个，第二个呼叫的完成功能呼叫第三个，最后在第三个呼叫的完成功能中执行您想要的任何操作。

更新：

要在paralel中运行，您需要异步代码首先创建一个全局

var doneFlag = 0;

然后我会使用setTimeout调用每个使用仅包含

的done函数

doneFlag++;

然后是第四个调用简单循环的setTimeout函数

while(doneFlag != 3)
{
   var x = 5+5; //just to keep from crashing js 
}
//any code you want to run after complete dl of all.

创建jquery promise层次结构的指南

3 个答案: