谈Javascript中匀速运动的停止条件

先来看看之前的匀速运动代码，修改速度速度后会出现什么样的bug。这里添加了两个基准测试。

复制的代码如下： style type=' text/CSS ' # div 1 { width : 100px；高度： 100像素；绝对位置：背景：红色；top: 50pxleft: 600px} # div2 { width: 1pxheight: 300px绝对位置：left: 300pxtop : 0；背景：黑色；} # div3 { width: 1pxheight: 300px绝对位置：left: 100pxtop : 0；背景：黑色；} /style脚本类型=' text/JavaScript ' var time=null；函数startMove(iTarget){ var oDiv=document . getelementbyid(' div 1 ')；clearInterval(时间)；time=setInterval(function(){ var speed=0；if(odiv . offsetleft itar get){ speed=7；} else { speed=-7；}//其实这种情况是有问题的odiv . style . left=odiv . offsetleftspeed ' px '；}，30)}/script/head body输入类型=' button' id=' BTN '值='到100 ' onclick=' startMove(100)'/Type=' button ' id=' BTN '值='到300 ' onclick=' start move(300)'/div id=' div 1 '/div div id=' div 2 '/div div id=' div 3 '/div/body。

事实上，如果这段代码将速度改为7的奇数，但目标点是整数，就会出现无法到达目标点或来回晃动超过目标点的bug。

那为什么会这样呢？

实际上，当他到达目标点时，他不能准确地到达目标点。如果目标点是100，他一次走7次，他要么通过目标点，要么失败。

永远不要到达目标点。实际上，这有点像以前帮助缓冲。

那么，目标点到底是什么呢？

比如你打车到某个地方，司机肯定在差不多10米20米远的地方停了，就算到了。不可能要求汽车停在那个地方。

所以，其实程序是一样的。只要物体与目标点的距离接近一定程度，我们就不需要再靠近了，所以我们认为它就在这里。

让我们看看修改后的代码：

复制的代码如下：脚本类型=' text/JavaScript ' vartime=null；

函数startMove(iTarget){ var oDiv=document . getelementbyid(' div 1 ')；clearInterval(时间)；time=setInterval(function(){ var speed=0；if(odiv . offsetleft itar get){ speed=7；} else { speed=-7；} if(math . ABS(itar get-odiv . offsetleft)=7){ clearInterval(time)；odiv . style . left=itar get ' px '；} else { Odiv . style . left=Odiv . offsetleft speed ' px '；} }，30)}/脚本

解释一下：为什么用Math.abs在这里得到绝对值？

原因很简单，因为速度可能是正的，也可能是负的。

现在我们让目标和物体之间的距离小于7，就这样。为什么是7？因为下次他的运动项目将少于七项。这个时候，假设他已经达到了目标点。

现在问题又来了。上面说他没有完全停在目标点。所以我们加了一个简单的句子，让左直接等于目标点。odiv . style . left=itar get ' px '；

其实最后一次离开的人不到七个人，但是我们都知道程序运行的太快了，人眼是看不到的。温暖的笑脸。

这个时候没有问题。眨眼

这是匀速运动的停止条件。然后有朋友问，为什么缓冲运动不那么麻烦？

因为他的速度在变，越来越小，直到最后他甚至达到1，所以循序渐进绝对不会造成这样的问题。