Deferred Back to the Future

by dougneiner

HTML

<script src="https://raw.github.com/gist/3195889/9d58e1d0b1b89d974e28feac8c76ee08844259c2/bind.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="https://gist.github.com/raw/7ed319a8d61e4c211db4/de7f266ad8b834ae65171616ed77821253e55f87/deferredSetup.js"></script>
<script id="tmpl" type="text/html">
    <% _.each(messages, function(msg) { %>
        <div><%= msg %></div>
    <% }) %>
</script>

CSS

div {
    font-family: arial; 
    font-size: 1.75em;  
    margin: .5em;   
}

JavaScript

var step1 = $.when(
    doc.hangCableOnClockTower(),
    marty.getInTimeMachine(delorean)
);

var step2 = step1.pipe( function ( sciName, trv ) {
    results.push(sciName + " has attached the cable to the clock tower.");
    results.push(trv[0] + " is now inside the " + trv[1] + ".");
    return $.when( delorean.goTo88Mph(), doc.slideDownCable());
});


var step3 = step2.pipe( function (tmName, sciName) {
    results.push(tmName + " has reached 88 mph.");
    results.push(sciName + " slid down the cable to the street.");
    return doc.connectCableOnStreet();
} );

var step4 = step3.pipe( function ( sciName ) {
    results.push(sciName + " connected the cable on the street.");
    return lightning.strike();
});
    
var step5 = step4.pipe( function() {
    results.push("Lightning strike!");
    return delorean.touchCable();
});

var step6 = step5.pipe( function ( tmName ) {
    results.push(tmName + " touched the cable.");
    return delorean.timeTravel();
});
    
var step7 = step6.pipe( function (tmName, trvName, year) {
    results.push(tmName + " took " + trvName + " to the year " + year);
});