Vamos primeiro olhar para o código anterior de movimento uniforme. Que tipo de bug ocorrerá após modificar a velocidade. Aqui estão dois benchmarks para testes
A cópia do código é a seguinte:
<style type = "text/css">
#div1 {
Largura: 100px;
Altura: 100px;
Posição: Absoluto;
Antecedentes: vermelho;
Top: 50px;
Esquerda: 600px;
}
#div2 {
Largura: 1px;
Altura: 300px;
Posição: Absoluto;
Esquerda: 300px;
topo: 0;
Antecedentes: preto;
}
#div3 {
Largura: 1px;
Altura: 300px;
Posição: Absoluto;
Esquerda: 100px;
topo: 0;
Antecedentes: preto;
}
</style>
<script type = "text/javascript">
var time = null;
função startMove (itetget) {
var odiv = document.getElementById ("div1");
ClearInterval (tempo);
time = setInterval (function () {
var velocidade = 0;
if (odiv.offsetleft <itarget) {
velocidade = 7;
} outro {
velocidade = -7;
}
// Na verdade, há um problema com esta situação
odiv.style.left = odiv.offsetleft + velocidade + 'px';
}, 30)
}
</script>
</head>
<Body>
<input type = "button" id = "btn" value = "para 100" onclick = "startMove (100)" />
<input type = "button" id = "btn" value = "a 300" onclick = "startMove (300)" />
<div id = "div1">
</div>
<div id = "div2">
</div>
<div id = "div3">
</div>
</body>
De fato, se esse código alterar a velocidade para um número ímpar como 7 e atingir o ponto de destino, é um número inteiro, que causará erros que não atingem o ponto de destino ou excedem o ponto de destino.
Então por que isso acontece?
De fato, quando ele atinge o ponto alvo, ele não pode atingir com precisão o ponto alvo. Se o ponto de destino for 100 e 7 caminharem a cada vez, nesse momento, ele passa pelo ponto de destino ou falha.
Nunca atinja o ponto alvo. Na verdade, é um pouco como ajudar o buffer anterior.
Então, como você calcula que atingiu o ponto de destino?
Por exemplo: se você levar um táxi para um determinado local, o motorista definitivamente parará por aí 10 metros e 20 metros de distância, e mesmo se você chegar. É impossível pedir ao carro que o coloque naquele lugar e pare.
Então, de fato, o programa é o mesmo. Enquanto a distância entre o objeto e o ponto alvo estiver próximo de certa medida, não precisamos estar mais próximos e achamos que chegamos a ele.
Vejamos o código modificado:
A cópia do código é a seguinte:
<script type = "text/javascript">
var time = null;
função startMove (itetget) {
var odiv = document.getElementById ("div1");
ClearInterval (tempo);
time = setInterval (function () {
var velocidade = 0;
if (odiv.offsetleft <itarget) {
velocidade = 7;
} outro {
velocidade = -7;
}
if (Math.abs (ITARGET - ODIV.OFFSETLEFT) <= 7) {
ClearInterval (tempo);
odiv.style.left = ITARGET+'PX';
} outro {
odiv.style.left = odiv.offsetleft + velocidade + 'px';
}
}, 30)
}
</script>
Deixe -me explicar: por que você precisa usar o Math.abs para obter o valor absoluto aqui?
O motivo é simples, porque a velocidade pode ser positiva ou negativa.
Agora, deixe a distância entre o alvo e o objeto ser tão pequeno quanto 7, então ele estará lá. Por que 7? Porque ele tem menos de 7 exercícios na próxima vez. Neste momento, alcançamos o ponto de destino.
Agora, o problema está chegando novamente, e ele não parou com precisão no ponto de alvo por escrito dessa maneira. Por isso, adicionamos uma frase simples, diretamente deixou de esquerda igual ao ponto de destino. odiv.style.left = ITARGET+'PX';
De fato, havia menos de 7 deles da última vez, mas todo mundo sabe que o programa corre muito rápido e o olho humano não pode vê -lo. Sorriso caloroso
Não haverá problema neste momento. Piscar
Esta é a condição de parada para o movimento uniforme. Então um amigo perguntou: por que o exercício de buffer não é tão problemático?
Porque sua velocidade mudou e está ficando cada vez menor, até o final, ele atingir 1, e definitivamente não haverá esse problema ao avançar passo a passo.