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

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.