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

Question

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

Answer 1

You have to change box.style.top after calling 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);

Answer 2

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

Answer 3

It's actually a pretty simple but easy to not realize problem.

Your test is happening late to the movement call. You first is calling the movement, before testing if it should move.

You can fix it changing a bit your logic. First you check if it should move, then you call the move. For example:

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

So, first I'm checking if the distance from the top of the box and the top of the wrapper is less than 450, then I make the move. If it's 450 or more, the interval will be cleared and the movement will not be called. This way, it will work as expected.