有限2个疑JS移动dom对象无法停止

JS移动dom对象无法停止

代码如下

html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Documenttitle>
      <style>
            #box{width: 200px;height: 200px;top: 300px;background-color: red;position: absolute}
            #deadline{width: 1px;height: 900px;background-color: black;position: absolute;left: 1000px;}
      style>
      <script>
            window.onload = function(){
                  var BTN = document.getElementById("btn");
                  BTN.onclick = function(){
                        Starmove(1000);
                  }
            }
            var timer = null;
            var Starmove = function(goal){
                  var BOX = document.getElementById("box");
                  var speed = (goal - BOX.offsetLeft)/18;
                  clearInterval(timer);
                  timer = setInterval(function(){
                        if(BOX.offsetLeft == goal ){
                              clearInterval(timer);
                        }else{
                              BOX.style.left = BOX.offsetLeft + speed + "px"
                        }
                  },30)
            }
      script>
head>
<body>
      <button id="btn">开始运动button>
      <div id="box">div>
      <span id="deadline">span>
body>
html>

有限2个疑问
1：当var speed = (goal - BOX.offsetLeft)/18;时，为什么box方块会出界？而设置var speed = (goal - BOX.offsetLeft)/8时不会出界？
2：已经设置了
if(BOX.offsetLeft == goal ){
clearInterval(timer);
所以我认为无论给speed设置一个怎样的数字，它都会最终停在目的地，为什么这个当我给speed = 5的时候它不会停止，而是无限运动出界？

除以18 speed会出现浮点数，浮点数四则运算时会有精度丢失问题，导致BOX.offsetLeft == goal不匹配。
除以8 speed为整数，没有精度问题，所以能停止
要改下逻辑，offsetleft大于goal就设置为goal防止浮点数计算精度丢失的问题

              timer = setInterval(function () {
                  var left = BOX.offsetLeft + speed;
                  if (left > goal) {///////////////////////////
                      clearInterval(timer);
                      left = goal;////////
                  }
                  BOX.style.left = left + "px"
 
              }, 30)
您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632

以下答案引用自GPT-3大模型,请合理使用：

修改示例。 

1：当speed的值越大，box方块移动速度就越快，而在此例中目标位置goal固定，speed越大会在移动到一定间距时超过goal，从而造成出界。设置speed = (goal - BOX.offsetLeft)/8时，box方块移动速度变慢，则不会出界；
2：在本例中，由于计算的是BOX.offsetLeft的值，因此当BOX.offsetLeft小于goal时，会比goal多移动5px，而当BOX.offsetLeft大于goal时，会比goal少移动5px，故当给speed  = 5的时候它不会停止，而是无限运动出界。

解决方法：可以通过在if判断中加入适当的精度调整来解决，如：

if(Math.abs(BOX.offsetLeft - goal) <= 1){
  clearInterval(timer);
}else{
  BOX.style.left = BOX.offsetLeft + speed + "px"
}

如果我的回答解决了您的问题，请采纳我的回答