Adding multiple layers with timed delay in Mapbox/Leaflet

Question

So I've got a Mapbox map showing data split into several layers. I'd like the user to be able to click a play button to call the function "gogogo", and then the layers get added one at a time every 1 second or so.

I'm trying to use simple Javascript to iterate through an array of addLayer's to add them one at a time, but the result of this code is that all the layers are added at once when the user clicks the button. Is there another way I should do this? Or is there some way through Mapbox or Leaflet's JS libraries to natively slow down the addition of layers?

var map = L.map('map').setView([57.8915,86.8359], 3);

// this just adds the basemap only
addLayer(L.mapbox.tileLayer('mymapboxaccount.7xu07ldi'), 'Base Map', -1);
function addLayer(layer, name, zIndex) {
    layer
        .setZIndex(zIndex)
        .addTo(map);
}

var animation;

function gogogo() {
  animation = setInterval(addNextLayer, 1000);
}

var layerAdder = function(layer) {
    layer
        .addTo(map);
};

function addNextLayer() {
  for (var i = 0; i < arrayLength; i++) {
    layerAdder(layers[i]);
  };

  var layers =  [addLayer(L.mapbox.tileLayer('mymapboxaccount.wv29be29')),
      addLayer(L.mapbox.tileLayer('mymapboxaccount.d08p8pvi')),
      addLayer(L.mapbox.tileLayer('mymapboxaccount.0tivygb9')),
      addLayer(L.mapbox.tileLayer('mymapboxaccount.lv8l4n29')),
      addLayer(L.mapbox.tileLayer('mymapboxaccount.mlr9hpvi'))
      ];

  var arrayLength = layers.length;

  clearInterval(animation);
}

Answer 1

Welp, figured out my answer after posting this, naturally. The code below is much different but works like a charm.

// define map
var map = L.map('map').setView([57.8915,86.8359], 3);

// define addLayer function
function addLayer(layer, name, zIndex) {
    layer
        .setZIndex(zIndex)
        .addTo(map);
}

// add basemap only
addLayer(L.mapbox.tileLayer('mymapboxaccount.7xu07ldi'), 'Base Map', -1);

// here are the new layers we're going to add
var layers =  [L.mapbox.tileLayer('mymapboxaccount.wv29be29'),
      L.mapbox.tileLayer('mymapboxaccount.d08p8pvi'),
      L.mapbox.tileLayer('mymapboxaccount.0tivygb9'),
      L.mapbox.tileLayer('mymapboxaccount.lv8l4n29'),
      L.mapbox.tileLayer('mymapboxaccount.mlr9hpvi')
      ];

// and the length of said array so that the timer will stop
var arrayLength = layers.length;

// set the counter for the timer
var i = 0;                     

// set the timer delay function to add layers to map, calling function name in HTML button
function gogogo () {           
   setTimeout(function () {    
      addLayer(layers[i], i); // adding one layer at a time from the array
      i++;                     
      if (i < arrayLength) {            
         gogogo();             
      }                        
   }, 2000); // delay between layer adds in milliseconds
}

Answer 2

That's because addNextLayer() adds all layers at once. Move layers array out of the function, and leave the function to:

var i = 0;
function addNextLayer() {
  if (i < layers.length)
    layerAdder(layers[i++]);
  else
    clearInterval(animation);
}