Async Queue

by molily

HTML

<div id="output"></div>

JavaScript

(function () {

var addFive = function (data) {
  for (var i = 0, l = data.length; i < l; i++) {
    data[i] = data[i] + 5;
  }
  return data;
};
var timesTwo = function (data) {
  for (var i = 0, l = data.length; i < l; i++) {
    data[i] = data[i] * 2;
  }
  return data;
};
var sum = function (data) {
  var sum = 0;
  for (var i = 0, l = data.length; i < l; i++) {
    sum += data[i];
  }
  return sum;
};

var renderStatus = function () {
  document.getElementById('output').innerHTML =
    ((initialQueueLength - queue.length) / initialQueueLength * 100)  + '%';
};

var queue = [addFive, timesTwo, sum, alert];
var initialQueueLength = queue.length;
var processQueue = function (data) {
  var func = queue.shift();
  if (func) {
    data = func(data);
    renderStatus();
    var nextStep = function () {
      processQueue(data);
    };
    setTimeout(nextStep, 1000);
  }
};
    
var input = [1, 2, 3];
processQueue(input);

})();