Fun w/Async Shift Queue

by deanpeters

HTML

<h3>More experiments w/rolling my own queue</h3>
<h4>You'll want to use your Chrome / FireFox Firebug Inspector Console</h4>

<p>Some Additional Reading &amp; Fodder for Future Experiments:</p>
<ul>
    <li><a href="http://stage.learn.jquery.com/effects/uses_of_queue_and_dequeue/">Uses of Queue &amp; deQueue</a></li>
    <li><a href="http://kenneth.kufluk.com/blog/2010/08/chaining-asynchronous-methods-in-jquery-using-the-queue/">Chaining Methods in jQuery using the Queue</a></li>
    <li><a href="http://stackoverflow.com/questions/1058158/can-somebody-explain-jquery-queue-to-me">StackOverflow: Can Somebody Explain jQuery Queue to Me?</a></li>
    <li><a href="http://www.bennadel.com/blog/1864-Experimenting-With-jQuery-s-Queue-And-Dequeue-Methods.htm">Experimenting with jQuery Queue and deQueue Methods</a></li>  
</ul>
<ol id="theEvents">
</ol>
<script type="text/javascript">
      var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-442503-9']);
        _gaq.push(['_setDomainName', 'deanpeters.com']);
        _gaq.push(['_setCampNameKey', 'jsfiddle']);    
        _gaq.push(['_setCampMediumKey', navigator.userAgent ]); 
        _gaq.push(['_setCampSourceKey', 'internet']);   
        _gaq.push(['_setCampTermKey', 'javascript']);       
        _gaq.push(['_setCampContentKey', document.title ]); 
        _gaq.push(['_trackPageview']);
    
         (function() {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();
    </script>

JavaScript

/* 
* once done, try these:
 * http://caolan.github.com/nimble/
 * http://tobyho.com/2011/11/03/delaying-repeatedly/
 * http://stackoverflow.com/questions/4831276/making-asynchronous-calls-with-jquery
 * http://blog.jcoglan.com/2007/10/30/asynchronous-function-chaining-in-javascript/
 * http://bytes.com/topic/javascript/answers/168753-settimeout-asynchronous
 * http://javascript.info/tutorial/events-and-timing-depth
 */

var callbackTest = function(msg) {
    setTimeout(function() { POSH_AddLi("theEvents", 'test ' + msg); console.log('test', msg);}, 2500);
}

var sBuf = ["one", "two", "three", "four", "five", "six", "seven"];
var aBuf = [];

// the trick is to wrap the sucka -- get's confusing w/two function refs
sBuf.forEach(function(t) {                     // wrapper
    aBuf.push( function() { callbackTest(t); } );  // callback
});
               
// here's how we dequeu
console.log('aBuf', aBuf);
while(aBuf.length) {
    setTimeout(
    (aBuf.shift())() ,
    2500);
}

/* https://gist.github.com/1087170 */
var queue = function() {
  var tasks;

  return {
    start: function( list ) {
      tasks = list;
      first = tasks.pop();
      first();
    },

    next: function() {
      if ( tasks.length > 0 ) {
        tasks.pop()();
      }
    }
  }
}

       
// plain-old-javascript add item to list  
function POSH_AddLi(listID, text){
    var Parent = document.getElementById(listID);
    var NewLI = document.createElement("li");
    
    NewLI.appendChild(document.createTextNode(text));
    Parent.insertBefore(NewLI, Parent.firstChild);
    
    // NewLI.innerHTML = "this is a test";
    // Parent.appendChild(NewLI);
}

    
// example implementation
task_fn = function(i) {
  return function() {
    myMsg = "started " + i;
    console.log( myMsg );
    POSH_AddLi("theEvents", myMsg);
    window.setTimeout( done_fn(i), 1000 );
  }
}

done_fn = function(i) {
  return function() {
    myMsg = "finished " + i;
    console.log( myMsg );
   ...