تجنب التكرار في وظيفة عرض شرائح JavaScript مع الوعود

تعديل وظيفة JavaScript العودية لتجنب تجاوز سعة مكدس المكالمات

JavaScript - نهج قائم على الوعد مع حلقة فاصلة لتجنب التكرار

const duration = 2000; // Time to display each slide in milliseconds
const sizes = [[4000, 500], [1000, 4000], [600, 400], [100, 200], [4000, 4000]];
let n = 0;
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

function showSlides(duration) {
  const myParent = document.querySelector('#slide-div');
  setInterval(async () => {
    let sizeIndex = n++ % sizes.length;
    let w = sizes[sizeIndex][0];
    let h = sizes[sizeIndex][1];
    let myRandomizer = `https://placehold.co/${w}x${h}?text=${w}x${h}`;

    try {
      let myResponse = await fetch(myRandomizer);
      let myBlob = await myResponse.blob();
      let myUrl = URL.createObjectURL(myBlob);
      URL.revokeObjectURL(myParent.querySelector('img').src);
      myParent.querySelector('img').src = myUrl;
    } catch (error) {
      console.error('Error: ', error);
    }
  }, duration);
}

استخدام جافا سكريبت غير المتزامن دون العودية

JavaScript - الحل باستخدام حلقة مع الوعود وتجنب setInterval

const duration = 2000; // Time to display each slide in milliseconds
const sizes = [[4000, 500], [1000, 4000], [600, 400], [100, 200], [4000, 4000]];
let n = 0;
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

async function showSlides(duration) {
  const myParent = document.querySelector('#slide-div');

  while (true) {
    let sizeIndex = n++ % sizes.length;
    let w = sizes[sizeIndex][0];
    let h = sizes[sizeIndex][1];
    let myRandomizer = `https://placehold.co/${w}x${h}?text=${w}x${h}`;

    try {
      let myResponse = await fetch(myRandomizer);
      let myBlob = await myResponse.blob();
      let myUrl = URL.createObjectURL(myBlob);
      URL.revokeObjectURL(myParent.querySelector('img').src);
      myParent.querySelector('img').src = myUrl;
    } catch (error) {
      console.error('Error: ', error);
    }

    await sleep(duration);
  }
}

أسئلة شائعة حول تجنب التكرار في عرض شرائح JavaScript

1. ما هو العودية في JavaScript ولماذا يمثل مشكلة في عرض الشرائح؟
2. يحدث التكرار عندما تستدعي دالة نفسها، وإذا تم تنفيذها بشكل مستمر، فقد يؤدي ذلك إلى تجاوز سعة المكدس. في عرض الشرائح، قد يؤدي ذلك إلى استخدام زائد للذاكرة وربما يؤدي إلى تعطل المتصفح.
3. كيف يمكنني تجنب التكرار في وظيفة JavaScript؟
4. أحد الحلول هو استخدام setInterval أو setTimeout لجدولة المهام دون العودية. هناك خيار آخر وهو النموذج المستند إلى الحدث، حيث يتم تشغيل الوظائف بواسطة أحداث مستخدم أو متصفح محددة.
5. لماذا محاولتي للاستخدام while(true) قفل المتصفح؟
6. استخدام while(true) دون عملية غير متزامنة مثل await أو setTimeout يعمل في حلقة مستمرة دون توقف، مما يؤدي إلى حظر الموضوع الرئيسي، مما يتسبب في تجميد المتصفح.
7. هل يمكنني استخدام Promises لتجنب العودية؟
8. نعم، Promises السماح بالتنفيذ غير المتزامن دون استدعاءات الوظائف العودية. وهذا يضمن اكتمال كل عملية قبل بدء العملية التالية، مما يمنع تجاوز سعة المكدس.
9. ما هو requestAnimationFrame وكيف يساعد؟
10. requestAnimationFrame هي طريقة تسمح لك بإنشاء رسوم متحركة سلسة متزامنة مع معدل تحديث المتصفح. إنه فعال ويمنع الحسابات غير الضرورية عندما تكون علامة تبويب المتصفح غير نشطة.

تجنب العودية للحلقات المستمرة

تجنب التكرار في وظائف JavaScript، خاصة عند الاستخدام وعود، أمر بالغ الأهمية للحفاظ على الأداء. من خلال التحول إلى نهج قائم على الحلقة أو نموذج يحركه الحدث، يمكن للمطورين منع مكدس الاستدعاءات من النمو إلى ما لا نهاية وتجنب تعطل المتصفح.

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