Quería explorar los colores CSS hsl . El tono de atributo de hsl puede estar entre 0 y 360, así que recorrí los números de 0 a 360 y establecí un color de fondo como este hsl(i, 50%, 50%) . Para ver los colores, traté de implementar una ejecución retrasada del código porque de lo contrario creo que la ejecución del código sería tan rápida que no podría verlo. Por alguna razón, parece que no funciona. Mi expectativa era ver el cambio de color cada 1 segundo, pero solo cambia a rojo una vez, y luego no pasa nada. Además, el código se ejecuta todo a la vez sin demora. Aquí está mi código:
function myLoop() { for (let i = 0; i < 361; i++) { console.log(i); setTimeout(changeColor(i), 1000); } } function changeColor(hueIndex) { let elem = document.getElementById('bodyId'); elem.style.backgroundColor = `hsl(${hueIndex}, 50%, 50%)`; } <body id='bodyId'> <button onclick="myLoop();">Click me!</button> </body> function myLoop() { for (var i = 1; i <= 360; i++) { (function (i) { setTimeout(function () { document.querySelector("#bodyId").style.backgroundColor = `hsl(${i}, 50%, 50%)`; },100); })(i) } }Función con setTiomeOut