JavaScript Academy · Pelajaran

Pengguliran Tak Terbatas

Muat lebih banyak konten saat pengguna menggulir.

Pengguliran Tak Terbatas adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa Itu Pengguliran Tanpa Akhir?

Pengguliran tanpa akhir memuat lebih banyak konten secara otomatis saat pengguna mendekati bagian bawah daftar, sehingga tidak perlu mengeklik Halaman Berikutnya. Feed sosial dan hasil pencarian sering menggunakannya.

Pola Sentinel

Teknik yang paling rapi menggunakan sentinel: elemen kosong yang ditempatkan di akhir daftar. Saat sentinel masuk ke area tampilan, Anda mengambil dan menambahkan kelompok data berikutnya.

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

Mengawasi Sentinel

Arahkan observer IntersectionObserver ke sentinel. Karena sentinel berada setelah entri terakhir, visibilitasnya berarti pengguna telah mencapai akhir.

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

Memicu Pemuatan

Dalam fungsi panggil balik, periksa isIntersecting. Jika nilainya benar, muat page data berikutnya.

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

Melacak Page

Simpan penghitung page agar setiap pemuatan mengambil potongan berikutnya. Naikkan nilainya setelah pengambilan berhasil.

let page = 1;

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

Mencegah Pemuatan Ganda

Fungsi panggil balik dapat dijalankan berulang kali. Gunakan penanda loading agar pengambilan baru tidak dimulai saat pengambilan lain masih berlangsung.

let loading = false;

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

Menambahkan Entri Baru

Tambahkan entri yang diambil sebelum sentinel agar sentinel tetap berada di bagian bawah daftar yang terus bertambah dan siap memicu pemuatan berikutnya.

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

Berhenti di Akhir

Saat peladen tidak mengembalikan data lagi, putuskan observer agar berhenti mencoba memuat data. Hal ini mencegah permintaan kosong yang tidak pernah berakhir.

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

Mengapa rootMargin Membantu

rootMargin yang cukup besar, seperti 200px, mulai memuat sebelum pengguna benar-benar mencapai bagian bawah, sehingga entri baru muncul dengan mulus tanpa jeda yang terlihat.

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

Catatan Aksesibilitas

Pengguliran tanpa akhir dapat menjebak pengguna papan ketik dan pembaca layar serta menyembunyikan kaki halaman. Pertimbangkan tombol Muat Lainnya manual sebagai cadangan dan umumkan konten baru dengan sopan melalui wilayah pembaruan langsung ARIA.

Alur Lengkap

Pengguliran tanpa akhir dengan IntersectionObserver: tempatkan sentinel, awasi, muat dan tambahkan data saat sentinel muncul, cegah pemuatan ganda, lalu putuskan koneksi saat data habis. Tidak diperlukan perhitungan pengguliran.

Pemeriksaan Singkat

Uji pemahaman Anda tentang pengguliran tanpa akhir.

Ringkasan

Anda telah membuat pengguliran tanpa akhir:

Tempatkan elemen sentinel setelah daftar.
Awasi elemen tersebut dengan IntersectionObserver.
Saat terjadi perpotongan, ambil dan tambahkan page berikutnya.
Gunakan penanda loading untuk menghindari pengambilan ganda.
Putuskan koneksi saat data habis.

Berikutnya, animasi yang dipicu pengguliran.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Pengguliran Tak Terbatas” gratis?

Ya — teks lengkap “Pengguliran Tak Terbatas” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Pengguliran Tak Terbatas”?

Muat lebih banyak konten saat pengguna menggulir. Kamu berlatih JavaScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Pengguliran Tak Terbatas” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke JavaScript Academy