ก่อนอื่นให้ดูที่รหัสก่อนหน้าของการเคลื่อนไหวเครื่องแบบ ข้อผิดพลาดชนิดใดจะเกิดขึ้นหลังจากปรับความเร็ว นี่คือสองเกณฑ์มาตรฐานสำหรับการทดสอบ
การคัดลอกรหัสมีดังนี้:
<style type = "text/css">
#div1 {
ความกว้าง: 100px;
ความสูง: 100px;
ตำแหน่ง: สัมบูรณ์;
ความเป็นมา: สีแดง;
ด้านบน: 50px;
ซ้าย: 600px;
-
#div2 {
ความกว้าง: 1px;
ความสูง: 300px;
ตำแหน่ง: สัมบูรณ์;
ซ้าย: 300px;
ด้านบน: 0;
ความเป็นมา: ดำ;
-
#div3 {
ความกว้าง: 1px;
ความสูง: 300px;
ตำแหน่ง: สัมบูรณ์;
ซ้าย: 100px;
ด้านบน: 0;
ความเป็นมา: ดำ;
-
</style>
<script type = "text/javascript">
var time = null;
ฟังก์ชั่น startmove (itarget) {
var odiv = document.getElementById ("div1");
ClearInterval (เวลา);
time = setInterval (ฟังก์ชัน () {
var speed = 0;
if (odiv.offsetleft <itarget) {
ความเร็ว = 7;
} อื่น {
ความเร็ว = -7;
-
// จริงๆแล้วมีปัญหากับสถานการณ์นี้
odiv.style.left = odiv.offsetleft + ความเร็ว + 'px';
}, 30)
-
</script>
</head>
<body>
<อินพุต type = "ปุ่ม" id = "btn" value = "ถึง 100" onclick = "startmove (100)" />
<อินพุต type = "ปุ่ม" id = "btn" value = "ถึง 300" onclick = "startmove (300)" />
<div id = "div1">
</div>
<div id = "div2">
</div>
<div id = "div3">
</div>
</body>
ในความเป็นจริงหากรหัสดังกล่าวเปลี่ยนความเร็วเป็นจำนวนคี่เช่น 7 และถึงจุดเป้าหมายมันเป็นจำนวนเต็มซึ่งจะทำให้เกิดข้อบกพร่องที่ไม่สามารถไปถึงจุดเป้าหมายหรือเกินจุดเป้าหมาย
แล้วทำไมเรื่องนี้ถึงเกิดขึ้น?
ในความเป็นจริงเมื่อเขามาถึงจุดเป้าหมายเขาไม่สามารถไปถึงจุดเป้าหมายได้อย่างถูกต้อง หากจุดเป้าหมายคือ 100 และ 7 เดินในแต่ละครั้งในเวลานี้เขาจะผ่านจุดเป้าหมายหรือล้มเหลว
ไม่เคยไปถึงจุดเป้าหมาย อันที่จริงมันเป็นเหมือนการช่วยเหลือบัฟเฟอร์ก่อนหน้านี้
แล้วคุณจะคำนวณได้อย่างไรว่าคุณมาถึงจุดเป้าหมายได้อย่างไร?
ตัวอย่างเช่นหากคุณนั่งแท็กซี่ไปยังสถานที่หนึ่งคนขับจะหยุดที่นั่นอย่างแน่นอน 10 เมตรและ 20 เมตรและแม้ว่าคุณจะมาถึง เป็นไปไม่ได้ที่จะขอให้รถติดในสถานที่นั้นและหยุด
ดังนั้นในความเป็นจริงโปรแกรมก็เหมือนกัน ตราบใดที่ระยะห่างระหว่างวัตถุและจุดเป้าหมายอยู่ใกล้กับระดับหนึ่งเราไม่จำเป็นต้องอยู่ใกล้และเราคิดว่าเราได้มาถึงแล้ว
มาดูรหัสที่แก้ไข:
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
var time = null;
ฟังก์ชั่น startmove (itarget) {
var odiv = document.getElementById ("div1");
ClearInterval (เวลา);
time = setInterval (ฟังก์ชัน () {
var speed = 0;
if (odiv.offsetleft <itarget) {
ความเร็ว = 7;
} อื่น {
ความเร็ว = -7;
-
if (math.abs (itarget - odiv.offsetleft) <= 7) {
ClearInterval (เวลา);
odiv.style.left = itarget+'px';
} อื่น {
odiv.style.left = odiv.offsetleft + ความเร็ว + 'px';
-
}, 30)
-
</script>
ให้ฉันอธิบาย: ทำไมคุณต้องใช้ Math.Abs เพื่อรับค่าสัมบูรณ์ที่นี่?
เหตุผลนั้นง่ายเพราะความเร็วอาจเป็นบวกหรือลบ
ตอนนี้ให้ระยะห่างระหว่างเป้าหมายและวัตถุมีขนาดเล็กเท่ากับ 7 จากนั้นจะอยู่ที่นั่น ทำไม 7? เพราะเขามีแบบฝึกหัดน้อยกว่า 7 ครั้งในครั้งต่อไป ในเวลานี้เรามาถึงจุดเป้าหมายแล้ว
ตอนนี้ปัญหากำลังจะกลับมาอีกครั้งและเขาไม่ได้หยุดอย่างแม่นยำที่จุดเป้าหมายในการเขียนด้วยวิธีนี้ ดังนั้นเราจึงเพิ่มประโยคง่ายๆปล่อยให้ซ้ายเท่ากับจุดเป้าหมายโดยตรง odiv.style.left = itarget+'px';
ในความเป็นจริงมีน้อยกว่า 7 ในครั้งที่แล้ว แต่ทุกคนรู้ว่าโปรแกรมทำงานเร็วเกินไปและดวงตามนุษย์ไม่สามารถมองเห็นได้ รอยยิ้มอันอบอุ่น
จะไม่มีปัญหาในเวลานี้ กระพริบตา
นี่คือเงื่อนไขการหยุดสำหรับการเคลื่อนไหวที่สม่ำเสมอ จากนั้นเพื่อนคนหนึ่งถามว่าทำไมการออกกำลังกายบัฟเฟอร์จึงไม่ลำบาก
เนื่องจากความเร็วของเขาเปลี่ยนไปและมันก็เล็กลงเรื่อย ๆ จนกระทั่งสิ้นสุดเขาถึง 1 และจะไม่มีปัญหาเช่นนี้เมื่อก้าวไปข้างหน้าทีละขั้นตอน