Create a delay within a for each loop

Question

I want to be able to make the console.log(key); make the log every 5 seconds, at the moment there is no delay and all the data gets logged at the same time.

//the location of my usres table
  var ref = new Firebase('https://myapp.firebaseIO.com/users/'); 

//ask fire base to get the records just once
    ref.once("value", function (snapshot) {

//loop through the retuned records
    snapshot.forEach(function (childSnapshot) {

// get just the value for the key
        var key = childSnapshot.key();

// log the key - this will be changed to send the value to another function
        console.log(key);

    });
})

The console.log above give me thousands of Id's, I need to pass these Id's to another function, If I pass all these id's all at one time the next function will blow up, so I want to pass them slowly, one by one to the next function. other ideas welcomed.

Answer 1

Use closure to get the value of key of current iteration after the setTimeout

Try this:

 var ref = new Firebase('https://myapp.firebaseIO.com/users/');
 ref.once("value", function(snapshot) {
   snapshot.forEach(function(childSnapshot, index) {
     var key = childSnapshot.key();
     setTimeout((function(key) {
       return function() {
         console.log(key);
       }
     })(key), 5000 * index);
   });
 });

Answer 2

Maybe you mean a custom array iterator that iterates to the next element in the array after a specified delay. I made one using functional programming principals to promote re usability. see below

/*
 * makeTimedForEach
 *
 * this will create an array itererator that will loop through an array
 * at a specified timeout delay.
 * 
 * @param {array}   arr    array to iterate
 *
 * @returns {Function} function to pass in callback and delay
 */
function makeTimedForEach(arr) {
  return function timedForEach(fn, delay) {
    var ii = 0;
    function iterate() {
      if (ii < arr.length) {
        // call the callback injecting the current element, index and array like native forEach
        fn.call( arr[ii], arr[ii], ii, arr );

        ii++;
        // call iterate again
        setTimeout(iterate, delay);
      }
    }
    // call for the first time you could add a setTimout here 
    // if you needed a delay at the start
    // setTimeout( iterate, delay );
    iterate();
  }
}

// Snapshot mock
function Snapshot(key) {
  this._key = key;
}
Snapshot.prototype = {
  key: function(){
    return this._key;
  }
}


var
  // a mock of the snapshot you get returned from `new FireBase`
  snapshot = [new Snapshot('one'), new Snapshot('two'), new Snapshot('three')],
  // create the iterator
  snapshotTimedForEach = makeTimedForEach(snapshot);

// call the iterator passing in the callback and the delay time
snapshotTimedForEach(function(childSnapshot, ii, arr) {
  console.log( childSnapshot.key(), childSnapshot, ii, arr );
}, 1000);

<script src="http://codepen.io/synthet1c/pen/WrQapG.js"></script>

original answer:

Im not sure if this is what you need, I cant see a point in logging the same result every 5 seconds. It seems you may want to poll the firebase api every 5 seconds

var ref = new Firebase('https://myapp.firebaseIO.com/users/');
ref.once("value", function(snapshot) {
  snapshot.forEach(function(childSnapshot) {

    var key = childSnapshot.key();

    // you can use setTimeout that recursively calls itself,
    // setTimeout will run the callback after the time has passed 
    // and wont lock up your thread like setInterval
    function log() {
      console.log(key);
      setTimeout( log, 5000);
    }
    // call log for the first time
    setTimeout( log, 5000);

  });
})

Answer 3

var ref = new Firebase('https://myapp.firebaseIO.com/users/');

ref.once("value", function (snapshot) {

    for(var i=0; i<snapshot.lenght;i++){
        var childSnapshot = snapshot[i];

        var key = childSnapshot.key();

        setTimeout(function () {
            console.log(key);
        }, 5000); // will stop the loop for 5 seconds every time
    }


});

Answer 4

You can use setTimeout and recursive function like this:

function values(obj) {
    if (obj instanceof Array) {
        return obj.slice();
    } else {
        return Object.keys(obj).map(function(key) {
            return obj[key];
        });
    }
}

ref.once("value", function (snapshot) {
    var array = values(snapshot.val());
    (function process() {
       var item = array.shift();
       if (item) {
           var key = item.key();
           console.log(key);
           setTimeout(process, 5000);
       }
    })();
});