https://codepen.io/skinaqua123/pen/WNZZgEy
<div id="container"> <div id="box"></div> </div> #container { background-color: black; width: 800px; height: 500px; position: relative; } #box { width: 50px; height: 50px; background-color: yellow; position: absolute; top: 0px; transition: top 0.5s ease-out 0s; } html { height: 100%; max-height: 100%; } const box = document.querySelector("#box"); console.log(box.offsetTop); const fallingMovement = setInterval(() => { box.style.top = box.offsetTop + 50 + "px"; if (box.offsetTop >= 500 - 50 - 50) { clearInterval(fallingMovement); } }, 1000);Hola, estoy probando un código para mi juego html. Quiero que una caja caiga, pero no más allá del div de envoltura.
Mi altura de envoltura div (contenedor) es de 500 px y mi caja es de 50 px. Creo que debería detenerse cuando la parte superior es 450px (500-50).
Pero, de hecho, sigue siendo 50px más de lo que debería. Cuando lo cambio a 400, está funcionando correctamente.
¿Por qué está pasando esto? ¿La función que le di a setInterval se ejecutará una vez más aunque llamé a clearInterval ?
Gracias
Tienes que cambiar box.style.top después de llamar a clearInterval
const box = document.querySelector("#box"); const fallingMovement = setInterval(() => { console.log('run interval --------') console.log('current offsetTop', box.offsetTop) console.log('future offsetTop', box.offsetTop + 50) if (box.offsetTop >= 500 - 50) { clearInterval(fallingMovement); return; } box.style.top = box.offsetTop + 50 + "px"; }, 1000);Hay un retraso de tiempo entre la ejecución de la devolución de llamada del intervalo y los resultados de la representación. Puede ver esto comparando los resultados de box.offsetTop inmediatamente después de cambiar box.style.top y después de un tiempo de espera:
const fallingMovement = setInterval(() => { box.style.top = box.offsetTop + 50 + "px"; if (box.offsetTop >= 500 - 50 - 50) { clearInterval(fallingMovement); console.log(box.offsetTop); // Will print 400. setTimeout(() => {console.log(box.offsetTop);}, 500); // Will print 450. } }, 1000);Para solucionar esto, simplemente deberá realizar la verificación antes de actualizar, en lugar de después:
const fallingMovement = setInterval(() => { if (box.offsetTop >= 500 - 50 - 50) { clearInterval(fallingMovement); return; } box.style.top = box.offsetTop + 50 + "px"; }, 1000);Alternativamente, podría tener en cuenta esta actualización de compensación retrasada:
const fallingMovement = setInterval(() => { box.style.top = box.offsetTop + 50 + "px"; if (box.offsetTop + 50 >= 500 - 50 -50) { clearInterval(fallingMovement); } }, 1000);En realidad, es un problema bastante simple pero fácil de no darse cuenta.
Su prueba está sucediendo tarde a la llamada de movimiento. Primero está llamando al movimiento, antes de probar si debe moverse.
Puedes arreglarlo cambiando un poco tu lógica. Primero verifica si debe moverse, luego llama al movimiento. Por ejemplo:
const fallingMovement = setInterval(() => { if (box.offsetTop < 500 - 50) { box.style.top = box.offsetTop + 50 + "px"; } else { clearInterval(fallingMovement); } }, 1000);Entonces, primero compruebo si la distancia desde la parte superior de la caja hasta la parte superior del envoltorio es inferior a 450, luego hago el movimiento. Si es 450 o más, se borrará el intervalo y no se llamará al movimiento. De esta manera, funcionará como se esperaba.