下面用javascript实现的缓冲运动效果,是否存在让运动物体越过目标位置的bug?

代码及运行效果也可在 jsbin 中查看:https://jsbin.com/tilolazaci/1/edit?html,js,output



其中主要的代码是这两行:
//表达的意思是每调用一次定时器,box移动的距离为剩下路程的1/10。
var speed = (iTarget - box.offsetLeft)/10;

//对speed向上取整,以确保.box能准确运行到目标位置,如果没有这行代码,.box会在到达目标位置前停止运动.
//但如果添加了这行代码,是否会产生让运动物体越过目标位置的bug呢?
speed = Math.ceil(speed); 



疑问:是否存在向上取整后,最终得到的speed值大于剩余路程(iTarget - box.offsetLeft)的值的可能性? 
如果会大于,那么.box运动的距离会超过目标位置



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
  <input type="button" class="run" value="开始运动" />
  <!-- 运动物体 -->  
  <div class="box"></div>
  <!-- 目标位置-->
  <div class="target"></div>
</body>
</html>



var box = document.querySelector(".box"),
    run = document.querySelector(".run");

run.addEventListener("click",function(){
    setInterval(function(){
    //目标位置
    var iTarget = 300; 
    var speed = (iTarget - box.offsetLeft)/10;
        //如果没有对speed向上取整时,.box无法准确到达目标点 
        speed = Math.ceil(speed);
    box.style.left = box.offsetLeft + speed + "px";    
    },30);
});



/* 运动物体 */
.box{
    position:absolute;
    left:0;
    top:50px;
    width:100px;
    height:100px;
    background-color: red;
}
/* 目标位置 */
.target{
    position:absolute;
    left:300px;
    top:0;
    width:1px;
    height:300px;
    background-color: blue;
}

不会越过目标位置，因为box.offsetLeft获取的只能是整数。
当box.offsetLeft等于目标位置（300）时，speed是0，就是停止了。
其次box.offsetLeft最大也只有299，不会是299.5之类的有小数的。
299+1正好300