set Timeout and for in loop

Question

function createDivs(){ 
var styleHash = {};
vertical=0;
horizontal=0;
var h;
var aDiv
var colour;
var groupStyle;
    for(key in elHash){ 
      h=elArr[0][zIndex[key]]/elHash[key];
      colour = randomColor();
      setLocation(h,elHash[key]);
      var container = document.getElementById('container');
      styleElements(container,'width',(scrnWidth-40)+'px');
      styleElements(container,'height',(scrnHeight-200)+'px');
      aDiv = implementDOMelement(container,'div', '');
      groupStyle = function() {       
          styleElements(aDiv ,vposition,vertical+'px');
          styleElements(aDiv ,hposition,horizontal+'px');
          styleElements(aDiv ,'backgroundColor', colour);
          styleElements(aDiv ,'width', elHash[key]+'px');
          styleElements(aDiv ,'height', h+'px');
          styleElements(aDiv ,'zIndex', zIndex[key]);
          if (colour =='#ffffff'){styleElements(aDiv ,'border', 'solid');}
      }
      setTimeout( groupStyle ,1000);
    }
}

function randomColor(){
   var colorR;
   var colorG;
   var colorB;
   colorR = randomNumber(0,255);
   colorG = randomNumber(0,255);
   colorB = randomNumber(0,255);
   return 'rgb('+colorR+','+colorG+','+colorB+')';
}

function implementDOMelement(parentNode, elementType,innHTML, attributes ){//
    var element = document.createElement(elementType);
    for (key in attributes){
      element.setAttribute(key,attributes[key]);
    }
    element.innerHTML = innHTML;
    parentNode.appendChild(element);
    return element;
}

function styleElements(aNode,cssProperty,cssVal){
    aNode.style[cssProperty]=cssVal;
}

Why is 'setTimeout' executed only once instead on every iteration? Well my goal is to pop a div on every sec! Did't put all of the code but it works fine without setTimeOut and groupStyle(code not in a function)

10x for your help , BR

Answer 1

It is executed on every loop, but all 10 of them are executed at the same time. The loop goes through the list very fast, and by the time its done looping, not a single timeout has probably occured.

If you are looking to have the aFunc executed every 1 seconds, then use setInterval or alternatively increment the setTimeout time by 1000 after each iteration.

Answer 2

*psychic debugging* ...I believe you mean this:

var i = 0;

for(key in hash){
  var aFunc = function() {}
  setTimeout(aFunc, 1000 * i++);
} 

Your function calls all happen immediately after each other because the for loop takes no time to run and therefore all timeouts are set to approximately the same time. You need to increase the timeout with every iteration to get a once-every-second effect. Or you use setInterval()/clearInterval().

Answer 3

Look at this, it might just be the answer you are looking for:

setTimeout in for-loop does not print consecutive values

In your case: aDiv is pointing always to the last div of the loop. This is my guess why it looks like it only triggers once.

a simple solution for your code should be along this lines:

  groupStyle = function() {       
      styleElements(aDiv ,vposition,vertical+'px');
      styleElements(aDiv ,hposition,horizontal+'px');
      styleElements(aDiv ,'backgroundColor', colour);
      styleElements(aDiv ,'width', elHash[key]+'px');
      styleElements(aDiv ,'height', h+'px');
      styleElements(aDiv ,'zIndex', zIndex[key]);
      if (colour =='#ffffff'){styleElements(aDiv ,'border', 'solid');}
  }
  setTimeout( groupStyle ,1000);
  //replaced with:

  // I will assume vposition and hposition were supposed to be strings not variables
  doGroupStyle(aDiv, vertical, horizontal, elHash, key, zIndex, colour);

  // then create the doGroupStyle function
  function doGroupStyle(aDiv, vertical, horizontal, elHash, key, zIndex, colour) {
    setTimeout(function() {
      styleElements(aDiv ,'vposition',vertical+'px');
      styleElements(aDiv ,'hposition',horizontal+'px');
      styleElements(aDiv ,'backgroundColor', colour);
      styleElements(aDiv ,'width', elHash[key]+'px');
      styleElements(aDiv ,'height', h+'px');
      styleElements(aDiv ,'zIndex', zIndex[key]);
      if (colour =='#ffffff'){styleElements(aDiv ,'border', 'solid');
      }, 1000 * key);
    }
  }


// or an alternative approach as passcod suggested:
(function(aDiv, vertical, horizontal, colour, elHash, key, h, zIndex) {
groupStyle = function() {       
    styleElements(aDiv ,'vposition',vertical+'px');
    styleElements(aDiv ,'hposition',horizontal+'px');
    styleElements(aDiv ,'backgroundColor', colour);
    styleElements(aDiv ,'width', elHash[key]+'px');
    styleElements(aDiv ,'height', h+'px');
    styleElements(aDiv ,'zIndex', zIndex[key]);
    if (colour =='#ffffff'){styleElements(aDiv ,'border', 'solid');}
};
setTimeout(groupStyle ,1000 * key);
})(aDiv, vertical, horizontal, colour, elHash, key, h, zIndex);

Haven't tested it so you maybe have to modify it a bit. But that's the idea behind it.