JavaScript Academy · บทเรียน

การเลื่อนแบบไม่สิ้นสุด

โหลดเนื้อหาเพิ่มเติมขณะที่ผู้ใช้เลื่อน

การเลื่อนแบบไม่สิ้นสุด เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 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

กำหนดให้ตัวสังเกตการตัดกันติดตาม sentinel เนื่องจาก sentinel อยู่ถัดจากรายการสุดท้าย การมองเห็น sentinel จึงหมายความว่าผู้ใช้มาถึงท้ายรายการแล้ว

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

การเริ่มโหลด

ในฟังก์ชันเรียกกลับ ให้ตรวจสอบ isIntersecting เมื่อมีค่าเป็นจริง ให้โหลดข้อมูลหน้าถัดไป

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 เพื่อให้ 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

ลำดับการทำงานทั้งหมด

การเลื่อนแบบไม่สิ้นสุดด้วยตัวสังเกตการตัดกันมีขั้นตอนดังนี้: วาง sentinel สังเกต sentinel โหลดและเพิ่มข้อมูลเมื่อ sentinel ปรากฏ ป้องกันการโหลดซ้ำ และตัดการเชื่อมต่อเมื่อข้อมูลหมด ไม่จำเป็นต้องคำนวณตำแหน่งการเลื่อน

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ทดสอบความเข้าใจเรื่องการเลื่อนแบบไม่สิ้นสุด

สรุปทบทวน

คุณได้สร้างการเลื่อนแบบไม่สิ้นสุด:

วางองค์ประกอบ sentinel ไว้หลังรายการ
สังเกต sentinel ด้วยตัวสังเกตการตัดกัน
เมื่อเกิดการตัดกัน ให้ดึงข้อมูลและเพิ่มหน้าถัดไป
ใช้ตัวบ่งชี้ loading เพื่อหลีกเลี่ยงการดึงข้อมูลซ้ำ
ตัดการเชื่อมต่อเมื่อข้อมูลหมด

ถัดไป ภาพเคลื่อนไหวที่ทำงานเมื่อเลื่อน

คำถามที่พบบ่อย

บทเรียน “การเลื่อนแบบไม่สิ้นสุด” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การเลื่อนแบบไม่สิ้นสุด” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การเลื่อนแบบไม่สิ้นสุด”

โหลดเนื้อหาเพิ่มเติมขณะที่ผู้ใช้เลื่อน คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “การเลื่อนแบบไม่สิ้นสุด” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม

ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ JavaScript Academy