$.when 函数数组无法正常工作

Question

我要解决的问题：我想要两个 ajax 函数数组。一个应该首先运行的 topPriority，另一个具有低优先级的将在所有 topPriority 调用完成后立即启动。

然而，这个函数甚至没有在$.when 行中被调用。我使用正确吗？

//HTML：

<div id="foo">Hello World</div>

//CSS:

#foo{ border:1px solid red; padding:10px; display:none }

//Javascript:

// open your console!

function getData(){
   return $.get('/echo/html/');
}

function showDiv(){
    var dfd = $.Deferred();

    $('#foo').fadeIn( 1000, dfd.resolve );

    return dfd.promise();
}

var topPriorityFunctions = new Array();
topPriorityFunctions.push(showDiv);
topPriorityFunctions.push(getData);

$.when.apply($, topPriorityFunctions )
    .then(function( ajaxResult ){
        console.log('The animation AND the AJAX request are both done!');

        // ‘ajaxResult’ is the server’s response
        // start my lowPriorityTasks.
    });

Here 是所有这些代码的小提琴，以便能够对其进行测试和修改。

参考：我试图从这个page 上的工作示例进行修改，以解决我的问题。

Answer 1

$.when 不接受或期望一个函数数组，它期望一个 deferreds 数组。你需要调用你的函数，并传入 Promise。

var topPriorityPromises = [];
topPriorityFunctions.push(showDiv());
topPriorityFunctions.push(getData());

$.when.apply($, topPriorityPromises ).then(function () {
  // ...

如果您简化此操作并忽略数组/应用部分，您会以这种方式调用 when，这是错误的：

$.when(showDiv, getData);

不是这样，这是正确的：

$.when(showDiv(), getData());