closure setTimeout

by Alejandro M

HTML

<div id="cabecera">
 
  <h3>Ejemplos JavaScript</h3></div>

CSS

* {
  font-family: verdana, sans-serif;
}

.nodoNuevo {
  background-color: black;
  color: white;
  width: 100px;
  text-align: center;
  padding: 20px;
  font-size: 32px;
  float: left;
}

JavaScript

function mostrarNumConRetardo() {

  for (var i = 1; i < 6; i++) {
    setTimeout(function(x) {
      return function() {
        crearNodo(x);
      };
    }(i), 1000 * i);
  }


}

function mostrarNumConRetardoFail() {

  for (var i = 1; i < 6; i++) {
    setTimeout(function() {
        crearNodo(i);
    },1000*i);
  }


}
function crearNodo(numero) {
  var nodoHijo = document.createElement("div");
  nodoHijo.className = "nodoNuevo";
  nodoHijo.innerHTML = '' + numero;
  document.body.appendChild(nodoHijo);
}

mostrarNumConRetardoFail()
mostrarNumConRetardo()