دعونا نلقي نظرة أولاً على الكود السابق للحركة الموحدة. أي نوع من الأخطاء سيحدث بعد تعديل السرعة. فيما يلي معايير للاختبار
نسخة الكود كما يلي:
<type type = "text/css">
#div1 {
العرض: 100px ؛
الارتفاع: 100px ؛
الموقف: مطلق ؛
الخلفية: أحمر.
أعلى: 50 بكسل ؛
اليسار: 600 بكسل ؛
}
#div2 {
العرض: 1px ؛
الارتفاع: 300 بكسل ؛
الموقف: مطلق ؛
اليسار: 300 بكسل ؛
أعلى: 0 ؛
الخلفية: أسود.
}
#div3 {
العرض: 1px ؛
الارتفاع: 300 بكسل ؛
الموقف: مطلق ؛
اليسار: 100px ؛
أعلى: 0 ؛
الخلفية: أسود.
}
</style>
<script type = "text/javaScript">
var time = null ؛
وظيفة StartMove (Itarget) {
var odiv = document.getElementById ("div1") ؛
ClearInterval (الوقت) ؛
time = setInterval (function () {
var speed = 0 ؛
if (odiv.offsetleft <itarget) {
السرعة = 7 ؛
} آخر {
السرعة = -7 ؛
}
// في الواقع ، هناك مشكلة في هذا الموقف
Odiv.Style.Left = Odiv.offSetLeft + Speed + 'Px' ؛
} ، 30)
}
</script>
</head>
<body>
<type type = "button" id = "btn" value = "to 100" onClick = "StartMove (100)" />
<type type = "button" id = "btn" value = "to 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 (function () {
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 + Speed + 'Px' ؛
}
} ، 30)
}
</script>
اسمحوا لي أن أشرح: لماذا تحتاج إلى استخدام Math.ABS للحصول على القيمة المطلقة هنا؟
السبب بسيط ، لأن السرعة قد تكون إيجابية أو سلبية.
الآن اترك المسافة بين الهدف والكائن صغيرًا مثل 7 ، ثم سيكون هناك. لماذا 7؟ لأنه لديه أقل من 7 تمارين في المرة القادمة. في هذا الوقت ، وصلنا إلى النقطة المستهدفة.
الآن تأتي المشكلة مرة أخرى ، ولم يتوقف على وجه التحديد عند النقطة المستهدفة في الكتابة بهذه الطريقة. لذلك أضفنا جملة بسيطة ، دعنا يساوي النقطة المستهدفة مباشرة. Odiv.Style.Left = Itarget+'px' ؛
في الواقع ، كان هناك أقل من 7 منهم في المرة الأخيرة ، لكن الجميع يعلم أن البرنامج يسير بسرعة كبيرة وأن العين البشرية لا يمكنها رؤيتها. ابتسامة دافئة
لن تكون هناك مشكلة في هذا الوقت. وميض
هذا هو حالة التوقف للحركة الموحدة. ثم سأل أحد الأصدقاء ، لماذا تمرين التخزين المؤقت ليس مزعجًا جدًا؟
نظرًا لأن سرعته قد تغيرت وأصبحت أصغر وأصغر ، حتى النهاية يصل إلى 1 ، ولن تكون هناك بالتأكيد مشكلة من هذا القبيل عند التحرك إلى الأمام خطوة بخطوة.