Nested .when $ .then() s

Question

Auf Seite zu laden, 12 Elemente mit data-id Attribute werden in ein Array geschoben showcaseIds:

function pushShowcaseIds() { 

    showcaseIds = []; 

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

} 

pushShowcaseIds(); // run on load 

Wenn der Benutzer durch alle Elemente in dem Array alle gegangen ist (12 Elemente), so dass die currentItemId ist Null, möchte ich mehr Elemente laden, warten auf den Ajax-Aufruf zu beenden, schieben Sie alle neuen IDs auf der Seite in das Array, sobald es fertig ist, dann erlauben Sie dem Benutzer, fortzufahren.

$("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(); 
    }); 
} 

jedoch nach der loadMore() Funktion der currentItemId im $ .when.then genannt wird, ist nicht definiert und wenn ich es alert, kommt es sofort auf.

Also ich denke, die then() scheint sofort ausgeführt werden, anstatt auf den Ajax-Aufruf zu beenden warten. Ich nehme an, das hat etwas mit den "verschachtelten" $ .when then() s zu tun, aber ich bin mir nicht sicher.

Answer 1

Sie einfach vergessen, den Ausdruck in loadMore zurückzukehren:

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