JavaScript Academy · درس

التمرير اللانهائي

حمّلوا مزيدًا من المحتوى أثناء تمرير المستخدم.

التمرير اللانهائي درس مجاني في JavaScript Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في JavaScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

ما التمرير اللانهائي؟

يحمّل التمرير اللانهائي المزيد من المحتوى تلقائيًا عندما يقترب المستخدم من نهاية قائمة، بدلًا من مطالبته بالنقر على زر الصفحة التالية. وتستخدمه الخلاصات الاجتماعية ونتائج البحث عادةً.

نمط sentinel

تستخدم التقنية الأبسط عنصر sentinel: وهو عنصر فارغ يوضع في نهاية القائمة. وعندما يظهر sentinel أثناء التمرير، تجلب الدفعة التالية وتضيفها.

// Markup pattern:
// <ul id="feed"> ...items... </ul>
// <div id="sentinel"></div>  <!-- trigger element -->

مراقبة sentinel

وجّه Intersection Observer إلى sentinel. وبما أنه يأتي بعد العنصر الأخير، فإن ظهوره يعني أن المستخدم وصل إلى نهاية القائمة.

const sentinel = document.getElementById('sentinel');
const observer = new IntersectionObserver(onIntersect, {
  rootMargin: '200px' // load a bit early
});
observer.observe(sentinel);

تشغيل التحميل

تحقق من isIntersecting داخل دالة الاستدعاء. وعندما تكون قيمته true، حمّل الصفحة التالية من البيانات.

function onIntersect(entries) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      loadMoreItems();
    }
  });
}

تتبّع الصفحة

احتفظ بعدّاد للصفحات حتى يجلب كل تحميل الجزء التالي. زِد قيمته بعد نجاح الجلب.

let page = 1;

async function loadMoreItems() {
  const items = await fetchPage(page);
  appendItems(items);
  page++;
}

منع عمليات التحميل المزدوجة

قد تُستدعى دالة الاستدعاء بشكل متكرر. استخدم علامة loading حتى لا يبدأ جلب جديد أثناء وجود جلب آخر قيد التنفيذ.

let loading = false;

async function loadMoreItems() {
  if (loading) return;
  loading = true;
  const items = await fetchPage(page);
  appendItems(items);
  page++;
  loading = false;
}

إضافة العناصر الجديدة

أضف العناصر التي جلبتها قبل sentinel حتى يظل في أسفل القائمة المتنامية، مستعدًا لتشغيل عملية التحميل التالية.

function appendItems(items) {
  const feed = document.getElementById('feed');
  items.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item.title;
    feed.appendChild(li);
  });
}

التوقف عند النهاية

عندما لا يعيد الخادم مزيدًا من البيانات، افصل المراقب حتى يتوقف عن محاولة التحميل. ويمنع ذلك إرسال طلبات فارغة بلا نهاية.

const items = await fetchPage(page);
if (items.length === 0) {
  observer.disconnect(); // no more data
  return;
}

فائدة rootMargin

يبدأ rootMargin كبير نسبيًا، مثل 200px، التحميل قبل وصول المستخدم فعليًا إلى النهاية، فتظهر العناصر الجديدة بسلاسة من دون توقف ملحوظ.

new IntersectionObserver(onIntersect, {
  rootMargin: '300px' // begin loading well before the end
});

ملاحظات حول إمكانية الوصول

قد يحاصر التمرير اللانهائي مستخدمي لوحة المفاتيح وقارئات الشاشة، كما قد يخفي تذييل الصفحة. فكّر في توفير زر تحميل المزيد يدويًا كخيار احتياطي، وأعلن عن المحتوى الجديد بلطف باستخدام مناطق ARIA الحية.

التدفق الكامل

التمرير اللانهائي باستخدام Intersection Observer: ضع sentinel، وراقبه، وحمّل البيانات وأضفها عند ظهوره، وامنع عمليات التحميل المكررة، وافصل المراقب عند نفاد البيانات. ولا حاجة إلى حسابات التمرير.

اختبار سريع

اختبر مدى فهمك للتمرير اللانهائي.

مراجعة

لقد نفّذت التمرير اللانهائي:

ضع عنصر sentinel بعد القائمة.
راقبه باستخدام Intersection Observer.
عند التقاطع، اجلب الصفحة التالية وأضفها.
استخدم علامة loading لتجنب عمليات الجلب المكررة.
افصل المراقب عند نفاد البيانات.

بعد ذلك، سنتناول الرسوم المتحركة التي يشغّلها التمرير.

الأسئلة الشائعة

هل درس «التمرير اللانهائي» مجاني؟

نعم — نص درس «التمرير اللانهائي» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة JavaScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

ماذا ستتعلم في «التمرير اللانهائي»؟

حمّلوا مزيدًا من المحتوى أثناء تمرير المستخدم. تتمرن على JavaScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ JavaScript Academy؟

لا تُشترط خبرة سابقة. JavaScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «التمرير اللانهائي»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس JavaScript Academy هذا؟

نعم. كل درس في JavaScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى JavaScript Academy