Estoy tratando de reducir la velocidad de una animación de una imagen que se reduce para que pueda ver cómo se reduce en lugar de simplemente saltar a un tamaño más pequeño, pero lo que sucede es que mi consola registra las actualizaciones como debería, con intervalos entre cada actualización. , pero la imagen en la pantalla espera hasta que se completa el ciclo for y luego salta al tamaño final en lugar de volverse más pequeña gradualmente. ¿Hay algún problema con mi código o me estoy perdiendo algunas cosas detrás de escena sobre cómo se actualiza la página?
function sleep(milliseconds) { const date = Date.now(); let currentDate = null; do { currentDate = Date.now(); } while (currentDate - date < milliseconds); } function makeSmaller(){ for (let i = 100; i>50; i--){ rockButtonImage.style.width = i+'%'; console.log(rockButtonImage.style.width); sleep(50); } }Los navegadores modernos evitan las representaciones innecesarias de una página y esperan mientras se completa una iteración de ejecución de JavaScript antes de realizar una representación.
La función sleep() en el código provisto realmente no hace que un navegador se sleep , sino que hace un cálculo intensivo del procesador, lo que impide que el navegador procese nada.
Puede intentar usar la función setTimeout() en su lugar, por ejemplo:
var i = 100; function makeSmaller(){ console.log(rockButtonImage.style.width); rockButtonImage.style.width = i+'%'; i--; if (i > 50) { setTimeout(makeSmaller, 50); } }También puede resultarle útil confiar en las animaciones CSS o las transiciones CSS en lugar de JavaScript para tales efectos visuales, ya que JS no es tan eficiente como ellos.
Ver también:
setTimeout : https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeoutDebe obtener dinámicamente el elemento DOM getElementById y luego cambiar el ancho. No estoy seguro en qué contexto vive la variable RockButton. Es todo sobre el estado.