Let’s first look at the previous code of uniform motion. What kind of bug will occur after modifying the speed. Here are two benchmarks for testing
The code copy is as follows:
<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;
}
// Actually, there is a problem with this situation
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
}, 30)
}
</script>
</head>
<body>
<input type="button" id="btn" value="to 100" onclick="startMove(100)" />
<input type="button" id="btn" value="to 300" onclick="startMove(300)" />
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
</body>
In fact, if such a code changes the speed to an odd number like 7, and reaches the target point, it is an integer, which will cause bugs that fail to reach the target point or exceed the target point.
Then why does this happen?
In fact, when he reaches the target point, he cannot accurately reach the target point. If the target point is 100, and 7 walks each time, at this time, he either passes the target point or fails.
Never reach the target point. In fact, it's a bit like helping the previous buffering.
So how do you calculate that you have reached the target point?
For example: If you take a taxi to a certain place, the driver will definitely stop there 10 meters and 20 meters away, and even if you arrive. It is impossible to ask the car to stick it in that place and stop.
So, in fact, the program is the same. As long as the distance between the object and the target point is close to a certain extent, we don’t need to be closer, and we think we have reached it.
Let's look at the modified code:
The code copy is as follows:
<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>
Let me explain: Why do you need to use Math.abs to get the absolute value here?
The reason is simple, because the speed may be positive or negative.
Now let the distance between the target and the object be as small as 7, then it will be there. Why 7? Because he has less than 7 exercises next time. At this time, we have reached the target point.
Now the problem is coming again, and he did not stop precisely at the target point in writing this way. So we added a simple sentence, directly let left equal the target point. oDiv.style.left=iTarget+'px';
In fact, there were less than 7 of them last time, but everyone knows that the program runs too fast and the human eye cannot see it. Warm smile
There will be no problem at this time. Blink
This is the stopping condition for uniform movement. Then a friend asked, why is buffering exercise not so troublesome?
Because his speed has changed and it is getting smaller and smaller, until the end he even reaches 1, and there will definitely be no such problem when moving forward step by step.