Descargo de responsabilidad: no soy un ingeniero front-end, y nunca lo fui. Entonces, me disculpo si me estoy perdiendo algo muy obvio, pero no puedo entender lo que acabo de experimentar en JavaScript y jQuery.

En mi documento HTML, tengo algunos elementos div , un elemento de button y un <script> que contiene:

 $("button").click(function(){ $("div").fadeOut(); var colour = "rgb(" + Math.floor(Math.random()*255) + ", " + Math.floor(Math.random()*255) + ", " + Math.floor(Math.random()*255) + ")" $("div").css("background-color", colour); $("div").fadeIn(100); });

y esto funciona como se esperaba. Todos y cada uno de los nuevos clics en el <button> cambian el color de fondo de todos los elementos div , en el documento HTML adjunto, configurándolos en valores RGB generados aleatoriamente.

Sin embargo, si quiero jugar un poco y hacer un "espectáculo colorido", poniendo todo este fragmento en un bucle, como:

 $("button").click(function(){ for (var i = 0; i < 10; i++) { $("div").fadeOut(); var colour = "rgb(" + Math.floor(Math.random()*255) + ", " + Math.floor(Math.random()*255) + ", " + Math.floor(Math.random()*255) + ")" console.log(colour); $("div").css("background-color", colour); $("div").fadeIn(100); } });

todas las iteraciones se desvanecen y se desvanecen con el mismo color, aunque espero que sean aleatorias, e incluso console.log(colour) imprime diferentes valores (aleatorios).

Tenga en cuenta que entiendo que el azar puede ser pseudoaleatorio, dependiendo de la semilla predeterminada, pero esto no importa aquí ... mi problema es tener valores discretos, en la variable de colour , pero no hacer que funcionen, como se esperaba, en el método .css .

Entonces, ¿por qué esto (probablemente - .css ?) Funciona de manera diferente dentro y fuera del bucle?

Estoy usando Chrome de Google, si eso importa.