我們先來看下之前的勻速運動的代碼，修改了速度speed後會出現怎麼樣的一個bug。這裡加了兩個標杆用於測試
複製代碼代碼如下:
<style type="text/css">
#div1 {
width: 100px;
height: 100px;
position: absolute;
background: red;
top: 50px;
left: 600px;
}
#div2 {
width: 1px;
height: 300px;
position: absolute;
left: 300px;
top: 0;
background: black;
}
#div3 {
width: 1px;
height: 300px;
position: absolute;
left: 100px;
top: 0;
background: black;
}
</style>
<script type="text/javascript">
var time = null;
function startMove(iTarget) {
var oDiv = document.getElementById("div1");
clearInterval(time);
time = setInterval(function() {
var speed = 0;
if (oDiv.offsetLeft < iTarget) {
speed = 7;
} else {
speed = -7;
}
// 其實這種情況是有問題的
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
}, 30)
}
</script>
</head>
<body>
<input type="button" id="btn" value="到100" onclick="startMove(100)" />
<input type="button" id="btn" value="到300" onclick="startMove(300)" />
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
</body>
其實這樣的代碼如果把速度改成7這種奇數，而到達目標點卻是一個整數，這樣就會出現未能達目標點或超過目標點來回抖動的bug
那為什麼會出現這種情況呢？
實際上來說他到達目標點的時候無法精確到目標點，若目標點是100，每次走7個，這個時候他要么就是過了目標點，要么就是沒過。
永遠到不了目標點。其實幫之前的緩衝有點像。
那麼到底怎麼算才是到達了目標點呢？
舉個例子： 你打車到某個地方，司機肯定是到哪裡差不多離個10米20米就停下來了，就算到了。不可能要求汽車貼到那個地方停下來吧。
所以說呢，其實來講程序也是一樣的，我們只要物體和目標點之間的距離近到一定的程度，就不需要再近了，就認為到了。
我們看下修改後的代碼：
複製代碼代碼如下:
<script type="text/javascript">
var time = null;
function startMove(iTarget) {
var oDiv = document.getElementById("div1");
clearInterval(time);
time = setInterval(function() {
var speed = 0;
if (oDiv.offsetLeft < iTarget) {
speed = 7;
} else {
speed = -7;
}
if (Math.abs(iTarget - oDiv.offsetLeft) <= 7) {
clearInterval(time);
oDiv.style.left=iTarget+'px';
} else {
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
}
}, 30)
}
</script>
解釋一下： 這里為什麼要用Math.abs 取絕對值呢？
理由很簡單，因為速度可能是正的可能是負的。
現在我們讓目標和物體之間的距離只要小於等7, 那就算到了。為什麼是7呢？ 因為他下一次的運動都不足7個了。這個時候我們就算他到了目標點了。
那現在問題又來了， 這樣寫他並沒有精確的停在目標點的位置。所以我們加了一句簡單的話，直接讓left 等於目標點。 oDiv.style.left=iTarget+'px';
實際上最後一次走的不足7個，但是大家都知道程序這個運行的太快了，人眼是看不出來的。熱烈的笑臉
這個時候就沒有問題了。眨眼
這個就是勻速運動的停止條件。 那有朋友問，為什麼緩衝運動沒有這麼麻煩呢？
因為他的速度是變的，越來越小，直到最後他甚至就到達1了，一步一步往前肯定不會出現這樣的問題。