Вложенные $ .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, вытащить все новые идентификаторы на странице в массив после его завершения, а затем разрешить пользователю продолжить.

$("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() называется currentItemId в $ .when.then не определен, и когда я alert, он приходит мгновенно.

Итак, я думаю, что then() работает мгновенно, а не ждет завершения вызова ajax. Я предполагаю, что это имеет какое-то отношение к «вложенным» $ .when then() s, но я не уверен.

Answer 1

Вы просто забыли вернуть выражение внутри loadMore:

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