Why falling box in HTML & JavaScript using setInterval doesn't work as expected?

Issue

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);

Hi, I'm testing some code for my html game. I want a box to fall down but not beyond the wrapping div.

My height of wrapping div (container) is 500px and my box is 50px. I think it should stop when top is 450px (500-50).

But in fact, it still goes 50px more than it should. When I change it to 400, it is working correctly.

Why is this happening? Is the function I gave to setInterval will execute once again eventhough I called clearInterval?

Thanks

Solution

There is a time delay between the interval callback execution and render results. You can see this by comparing the box.offsetTop results immediately after changing the box.style.top and after a timeout:

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);

To fix this, you will simply need to perform the check before you update, rather than after:

const fallingMovement = setInterval(() => {
  if (box.offsetTop >= 500 - 50 - 50) {
    clearInterval(fallingMovement);
    return;
  }

  box.style.top = box.offsetTop + 50 + "px";
}, 1000);

Alternatively, you could account for this delayed offset update:

const fallingMovement = setInterval(() => {
  box.style.top = box.offsetTop + 50 + "px";
  if (box.offsetTop + 50 >= 500 - 50 -50) {
    clearInterval(fallingMovement);
  }
}, 1000);

Answered By - B. Fleming