Polymorphic rants

Control flow in Javascript

Mon, 26 Sep 2011 01:41:00 -0700

Mark Needham recently wrote a blog post on how his team worked around a Javascript asynchronous unwanted behaviour.

They want to iterate over a collection, executes some code for each element of the collection and only when all the collection has been traversed execute a final step.

//for the original blog post check
//http://www.markhneedham.com/blog/2011/09/25/jquery-collecting-the-results-from-a-collection-of-asynchronous-requests/

var people = ["Marc", "Liz", "Ken", "Duncan", "Uday", "Mark", "Charles"];
 
var grid = [];
$.each(people, function(index, person) {
  $.getJSON('/git/pairs/' + person, function(data) {
    // parse data and create somethingCool
    grid.push(somethingCool);
  });  
});
 
// do something with grid

Obviously this didn't work. Due to the asynchronous nature of Javascript the do something with grid block is invoked before the grid itself is filled and nothing interesting happens.

Their final approach is solving the unwanted behaviour by mostly removing any possible event driven behaviour and handling control in a full imperative way, explicitly calling functions in the expected sequence.

// for the origina blog post check
// http://www.markhneedham.com/blog/2011/09/25/jquery-collecting-the-results-from-a-collection-of-asynchronous-requests/

var people = ["Marc", "Liz", "Ken", "Duncan", "Uday", "Mark", "Charles"];
asyncLoop(people, [], function(name, grid, callBackFn) {
  // parse data and create something cool
  grid.push(somethingCool);
  callBackFn();
}, function(grid) {
  // do something with grid
});

function asyncLoop(collection, seedResult, loopFn, completionFn) {
  var copy = collection.slice(0);
  (function loop() {
    var item = copy.shift();
 
    if(copy.length == 0) {
      completionFn(seedResult);
    } else {
      loopFn(item, seedResult, loop);
    }	
  })();	
}

This works but it's not leveraging Javascript nature, and the code itself results harder then what it should be.

How the same problem can be solved embracing asynchronous thinking ?

function fecthData() {
  var people = ["Marc", "Liz", "Ken", "Duncan", "Uday", "Mark", "Charles"];
 
  var grid = [];
  $.each(people, function(index, person) {
    $.getJSON('/git/pairs/' + person, function(data) {
      // parse data and create somethingCool
      grid.push(data["name"])
      if (grid.length === people.length) {
        $(document).trigger("gridFilled", [grid]);
      }
    });  
  });
}
 
 
$(document).bind("gridFilled", function(e, grid) {
   //ready to do something with grid !
})

The way to achieve control flow in Javascript is with events.

When a block is completed it emits an event. All the interested parties will be listening to the specific event and execute their specific job, contributing to our overarching business flow.

This alternative solution is probably also more idiomatic and as a consequence more coincise and easier to read.

Polymorphic rants

Control flow in Javascript

Introducing node-tail: a NodeJS tail library

Building a firehose with NodeJS

Javascript testing

Italian Agile Day 2009: date announced

What has to be ready for the beginning of a project ?

QA productivity metrics

Local optimization doesn't necessarily mean improvement

Acceptance Testing of Flex applications

Signs of poor communication

Technology should leverage your business (a.k.a. REST anyone ??)

Flex: How to achieve proper separation of responsibilities

Working with Adobe Flex

Article: Seniority, Respect, Authority and an Agile Team

Article: Patrick Kua on the Agile Coach role

Integrate Ivy in a dotNet build

Ivy: how-to download dependencies to different folders

Live documentation with Evernote

Essap 2008

Just a bit of confusion...