Question

在页面加载时，带有data-id属性的12个项目将被推送到数组showcaseIds中：

function pushShowcaseIds () {

  showcaseIds = [];

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

}

pushShowcaseIds(); // run on load

如果用户已经浏览了数组中的所有项目（全部12个项目），那么currentItemId为空，我想加载更多项目，等待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 then（）s有关，但我不确定。

Answer 1

您只是忘记在loadMore内返回表达式：

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

嵌套$ .when .then（）s

1 个答案: