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

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

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

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.