JSFiddle - React, Tailwind, and code Playground

HTML

<div id="result"></div>

JavaScript

$('#result').html('waiting...');

var promise = wait();


// Chaining with done does not work
// Chaining with then does work

// Uncomment one of the following two lines
// The result is different, but should be the same

promise.done(result1).done(result2).done(result3);
//promise.then(result1).then(result2).then(result3);


function result1() {
    $('#result').html('done1');
    return wait();
}

function result2() {
    $('#result').html('done2');
    return wait();
}

function result3() {
    $('#result').html('done3');
    return wait();
}

function wait() {
    var deferred = $.Deferred();
    
    setTimeout(function() {
        deferred.resolve();
    }, 2000);

    return deferred.promise();
}