Search code examples
javascriptjquerydeferreddeferred-execution

What comes first .always() or .then() callbacks in jQuery?


If you have a function which has both .then and .always callbacks, which one will get executed first?


Solution

  • Taken from the deferred.resolve() documentation:

    When the Deferred is resolved, any doneCallbacks added by deferred.then() or deferred.done() are called. Callbacks are executed in the order they were added.

    Example below:

    var $logger = $("#logEntry");
    function addLog(content){
       $logger.append($("<li/>").html(content));
    }
    
    var newPromise = $.Deferred();
    
    $.when(newPromise).done(function() {
        addLog("1st $when().done!");
    });
    
    newPromise.then(function() {
        addLog("1st then!");
    }).always(function() {
        addLog("1st always!");
    }).done(function() {
        addLog("1st done!");
    }).done(function() {
        addLog("2nd done!");
    }).always(function() {
        addLog("2nd always!");
    }).then(function() {
        addLog("2nd then!");
    });
    
    $.when(newPromise).done(function() {
        addLog("2nd $when().done!");
    });
    
    addLog("Resolving promise!");
    
    newPromise.resolve();
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <ul id="logEntry"></ul>