嵌套$.when .then()s

Question

在页面加载时，12个具有data-id属性的项被推入数组showcaseIds中。

function pushShowcaseIds () {

  showcaseIds = [];

  $("[data-id]").each(function () {
    showcaseIds.push($(this).attr("data-id"));
  });

}

pushShowcaseIds(); // run on load

如果用户已经遍历了数组中的所有项(所有12个项)，例如currentItemId为null，我希望加载更多的项，等待ajax调用完成，完成后将页面上的所有新ID推入数组中，然后允许用户继续。

$("body").keydown(function(e) {

  index = showcaseIds.indexOf(currentItemId);
  cacheCurrent = currentItemId;

  if (e.keyCode == 37 || e.keyCode == 39){
      if(e.keyCode == 39) { // right
        currentItemId = showcaseIds[index + 1];
        if (currentItemId == null){
          $.when(
            loadMore()
          ).then(function(){
            index = showcaseIds.indexOf(cacheCurrent);
            currentItemId = showcaseIds[index + 1]; // undefined
          });
        } else {
          // continue as normal
        }
      }
  }
});

function loadMore () {
  $.when(
    $.ajax({
        // 
    })
  ).then(function(){
    pushShowcaseIds();
  });
}

但是，在调用loadMore()函数之后，$.when.then中的currentItemId是未定义的，当我对其进行alert时，它会立即出现。

因此，我想then()似乎正在立即运行，而不是等待ajax调用完成。我认为这与“嵌套”的$.when ()有关，但我不确定。

Answer 1

您只是忘了在loadMore中返回表达式

function loadMore () {
  return $.when(
    $.ajax({
        // 
    })
  ).then(function(){
    pushShowcaseIds();
  });
}