<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
      <h3>Please see developer console.</h3>
  </body>

</html>
function async(operation) {

    var promise = {
        queue: [],
        resolve: function(data) {
            promise.data = data;
            runQueue(data);
            promise.isResolved = true;
        }
    };

    function runQueue() {
        while (promise.queue.length) {
            promise.data = promise.queue.shift()(promise.data) || promise.data;
        }
    }

    operation(promise);

    var deferred = {
        done: function(callback) {
            
            if (promise.isResolved) {
                promise.data = callback(promise.data) || promise.data;
            }
            else {
                promise.queue.push(callback);
            }
            
            return deferred;
        }
    };
    
    return deferred;
}

var promise = async(function(promise) {
    setTimeout(function() {
        promise.resolve({ids: [1, 2, 3]});
    }, 2000);
})
.done(function(data) {
    console.log('done 1:', data);
})
.done(function(data) {
    console.log('done 2:', data);
    return data.ids;
})
.done(function(data) {
    console.log('done 3:', data);
    return data.join();
})
.done(function(data) {
    console.log('data 4:', data);
});



/* Styles go here */