generators_inCode_tutorial.js

//helper function for DOM manipulation
var updateDOM = function(res,res2,res3){
    $('#res').html(JSON.stringify(res));
    $('#res2').html(JSON.stringify(res2));
    $('#res3').html(JSON.stringify(res3));
};

//Defines a generator to call a JSON webservice.
//info 1: for each "yield" a separate generator call is needed
//this is why generators are called "pausable functions"
//info 2: because we yield jQuery ajax calls the return values are
//promises and therefore we'll later use "then" to resolve values
//info 3: when dealing with generators one SHOULD use a proper library 
//like Bluebird: https://github.com/petkaantonov/bluebird
//or Q: https://github.com/kriskowal/q/
//This code is for demonstration purposes only!
var initJsonGenerator = function*() {
  var res = yield $.get("http://md5.jsontest.com/?text=callOne");
  var res2 = yield $.get("http://md5.jsontest.com/?text=callTwo");
  var res3 = yield $.get("http://md5.jsontest.com/?text=callThree");
  updateDOM(res,res2,res3);
};

//This function takes an initialized generator and calls its next() method.
//****************************************************************************
//Each time a next() method gets called a "yield" from within the generator 
//will be executed (yes, yes, it behaves like an Iterator but with generators
//one doesn't have to maintain internal state/position etc.). 
//****************************************************************************
//The returned values will contain the indicator "done"
//which tells us the current state of generator execution. As long as
//"done" is not set to "true" there's still some work to do (that is, some "yields" to
//get executed). And because the return values in this example contain promises
//we'll call their "then" methods to receive the returned MD5-hashes.
var useGenerator = function(gen) {
    //some "random" number to mark different calls
    var id = Math.floor(Math.random()*99999);
    $('#output').append('<p>Call ID: ' + id +'</p>');
  
    //Let the jsonGenerator call "yields" one after another.
    //Here, next()-calls return promises. Therefore, we call "then"-methods
    //to receive the results asynchronously. 
    //These results we put back into the generator on each consecutive next() call. 
    //We do this because jsonGenerator will call updateDOM() after all yields
    //have completed their tasks.
    gen.next().value.then(function(res){
        return gen.next(res).value;  //put the last result back and call next()
    }).then(function(res){
         return gen.next(res).value; //...and again
    }).then(function(res){
        return gen.next(res).value;  //..and again
    }).then(function(res) {
        return gen.next(res).value; //...are we there yet?
    }).done(function(){
        //now, you see why you should use a proper library to handle
        //generators & promises? ;)
        $('#output').append('<div>DONE!</div>'); 
    });
};

//Get generator ready to run. 
//This does not mean the generator will run immediately.
//Instead, it will wait for explicit next() calls.
var generator = initJsonGenerator();
//use it by calling next()
useGenerator(generator);

index.html

<!-- Use this file to show the results -->
<!-- include Bootstrap styles -->
<span>Generator Results</span>
<div id="results" class="panel panel-default">
    <div class="panel-heading">
        <div class="panel-body">
            <div class="container">
                <div class="row">
                    <div class="col-md-5">
                        <div id="res"></div>
                        <div id="res2"></div>
                        <div id="res3"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<span>Output</span>
<div class="well">
    <div class="container">
        <div class="row">
            <div class="col-md-5">
               <div id="output"></div>
            </div>
        </div>
    </div>
</div>