yield

by Noseratio

HTML

<script src="https://s3-us-west-1.amazonaws.com/q-releases/q.js"></script>
First, make sure to enable JavaScript Harmony in Chrome: <br>
<a href="chrome://flags/#enable-javascript-harmony">chrome://flags/#enable-javascript-harmony</a>

JavaScript

(function () {
    "use strict";

    function delay(ms) {
        var deferred = Q.defer();
        setTimeout(deferred.resolve, ms);
        return deferred.promise;
    }
    
    function main()
    {
        var callback = Q.async(function*(){
            var bodyStyle = document.body.style;

            yield delay(1000);
            bodyStyle.backgroundColor = "red";
            printOutput("step 1");
            
            yield delay(1000);
            bodyStyle.backgroundColor = "green";
            printOutput("step 2");
            
            yield delay(1000);
            bodyStyle.backgroundColor = "blue";
            printOutput("step 3");
            
            yield delay(1000);
            printOutput("step 4");
            bodyStyle.backgroundColor = "white";
        });
        
        Q.fcall(callback).then(function (){
            printOutput("Done!");
        });
    }
    
    function printOutput(line) {
        outputText.data += line + "\n";
    }    
    
    var output = document.createElement("pre");
    document.body.appendChild(output);
    var outputText = document.createTextNode("");
    output.appendChild(outputText);
    main();    
})();