لماذا يعتبر requestAnimationFrame أفضل من setInterval أو setTimeout

بينما يمكن استخدام كل من setInterval وsetTimeout لمهام الرسوم المتحركة، يعتبر requestAnimationFrame بشكل عام خيارًا أفضل لعدة أسباب.

1. المزامنة مع معدل تحديث العرض

requestAnimationFrame يقوم بمزامنة عمليات الاسترجاعات الخاصة به مع معدل تحديث العرض للجهاز، عادةً 60 هرتز. وهذا يعني أنه يتم تحديث الرسوم المتحركة بمعدل إطارات ثابت، مما يزيل الارتعاش والتقطع الذي يمكن أن يحدث مع setInterval أو setTimeout.

2. انخفاض استهلاك الموارد

يستدعي setInterval وsetTimeout عمليات رد الاتصال الخاصة بهم على فترات زمنية محددة، حتى لو لم يكن المتصفح يعرض بشكل نشط. يمكن أن يؤدي هذا إلى استخدام غير ضروري لوحدة المعالجة المركزية واستنزاف البطارية. من ناحية أخرى، يقوم requestAnimationFrame باستدعاء رد الاتصال الخاص به فقط عندما يكون المتصفح على وشك عرض إطار جديد، مما يوفر الموارد.

3. تجربة مستخدم محسّنة

تبدو الرسوم المتحركة المدعومة بواسطة requestAnimationFrame أكثر سلاسة وأكثر استجابة مقارنةً بتلك التي تستخدم setInterval أو setTimeout. وذلك لأن requestAnimationFrame يأخذ في الاعتبار معدل تحديث الجهاز ويضمن تشغيل الرسوم المتحركة بوتيرة متسقة وممتعة بصريًا.

4. توفر الطابع الزمني

requestAnimationFrame يوفر معلمة الطابع الزمني لرد الاتصال الخاص به، والذي يمثل الوقت الذي تمت جدولة عرض الإطار فيه. يمكن استخدام هذا الطابع الزمني لحساب الوقت المنقضي منذ الإطار السابق، مما يتيح تحكمًا أكثر دقة في الرسوم المتحركة وانتقالات سلسة.

5. يؤدي التخلص من Shear and Flicker

requestAnimationFrame إلى حل مشكلات مثل القص (مواضع الرسوم المتحركة غير المتطابقة) والوميض (عرض إطار غير مكتمل) الذي يمكن أن يحدث مع setInterval أو setTimeout. وذلك لأنه يقوم بجدولة عرض الإطار التالي فقط عندما يتم عرض الإطار الحالي بالكامل على الشاشة.

باختصار، يعتبر requestAnimationFrame هو الخيار المفضل لمهام الرسوم المتحركة نظرًا لمزامنته مع معدل تحديث العرض، وتقليله. استهلاك الموارد، وتحسين تجربة المستخدم، وتوافر الطوابع الزمنية، والقضاء على القص والوميض.