jQuery Academy · Pelajaran

Penanganan Peristiwa dan Throttling yang Efisien

Penanganan Peristiwa dan Throttling yang Efisien adalah pelajaran jQuery Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 3. 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 jQuery Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus jQuery Academy mencakup 3 pelajaran total.

Kelebihan Beban Peristiwa: Masalah Kinerja

Saat membangun aplikasi web interaktif, kita sering mengandalkan peristiwa seperti pengguliran, pengubahan ukuran, atau pengetikan. Peristiwa-peristiwa ini memicu fungsi yang memperbarui UI atau melakukan perhitungan.

Namun, jika peristiwa tersebut dipicu terlalu sering, hal ini dapat menyebabkan hambatan kinerja, pengalaman pengguna yang lambat, bahkan peramban mogok. Di sinilah teknik pengoptimalan menjadi sangat penting.

Masalahnya: Peristiwa Dipicu dengan Cepat

Mari lihat seberapa sering peristiwa umum seperti scroll dapat dipicu tanpa pengoptimalan. Buka konsol atau amati penghitung saat Anda menggulir.

Perhatikan betapa cepat jumlahnya bertambah, yang menunjukkan banyak pemanggilan fungsi dalam waktu singkat. Hal ini bisa sangat tidak efisien.

<!DOCTYPE html>
<html>
<head>
<title>Rapid Event Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  body { height: 200vh; font-family: sans-serif; margin: 0; }
  #status { position: fixed; top: 10px; left: 10px; background: #ffe0b2; padding: 8px; border-radius: 4px; font-size: 14px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
  p { margin-top: 50px; padding: 10px; }
</style>
</head>
<body>
  <div id="status">Scroll Count: 0</div>
  <p>Scroll down to see the event fire rapidly.</p>
  <script>
    $(document).ready(function() {
      let count = 0;
      $(window).on('scroll', function() {
        count++;
        $('#status').text('Scroll Count: ' + count);
      });
    });
  </script>
</body>
</html>

Memperkenalkan Pembatasan Laju

Pembatasan laju adalah teknik yang membatasi seberapa sering suatu fungsi dapat dipanggil dalam jangka waktu tertentu. Teknik ini memastikan bahwa suatu fungsi dijalankan paling banyak sekali dalam interval waktu tertentu.

Bayangkan seperti gerbang yang hanya terbuka setiap 200 milidetik. Tidak peduli berapa kali Anda mencoba melewatinya, Anda hanya dapat lewat saat gerbang terbuka.

Pembatasan Laju dalam Praktik

Berikut utilitas pembatasan laju sederhana. Utilitas ini memastikan penangan gulir kita dijalankan paling banyak sekali setiap 200 milidetik. Hal ini secara signifikan mengurangi jumlah pemanggilan selama pengguliran terus-menerus.

Bandingkan dengan contoh sebelumnya. Jumlahnya diperbarui dengan lancar tetapi lebih jarang, sehingga menghemat sumber daya.

<!DOCTYPE html>
<html>
<head>
<title>Throttling Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  body { height: 200vh; font-family: sans-serif; margin: 0; }
  #status { position: fixed; top: 10px; left: 10px; background: #c8e6c9; padding: 8px; border-radius: 4px; font-size: 14px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
  p { margin-top: 50px; padding: 10px; }
</style>
</head>
<body>
  <div id="status">Throttled Scroll Count: 0</div>
  <p>Scroll down. The count updates less frequently.</p>
  <script>
    // A simple throttling utility function
    function throttle(func, delay) {
      let canRun = true;
      return function(...args) {
        if (canRun) {
          func.apply(this, args);
          canRun = false;
          setTimeout(() => canRun = true, delay);
        }
      };
    }

    $(document).ready(function() {
      let count = 0;
      const throttledScroll = throttle(function() {
        count++;
        $('#status').text('Throttled Scroll Count: ' + count);
      }, 200); // Update at most every 200ms

      $(window).on('scroll', throttledScroll);
    });
  </script>
</body>
</html>

Memperkenalkan Penundaan Pemanggilan

Penundaan pemanggilan adalah teknik lain yang menunda eksekusi fungsi hingga waktu tertentu berlalu sejak terakhir kali peristiwa dipicu.

Bayangkan lampu yang baru mati setelah Anda berhenti bergerak selama 1 detik. Jika Anda terus bergerak, penghitung waktunya dimulai ulang. Fungsi hanya dijalankan setelah pengguna berhenti melakukan tindakan selama durasi penundaan yang ditentukan.

Penundaan Pemanggilan dalam Praktik

Di sini, kita menerapkan penundaan pemanggilan pada peristiwa keyup dari input teks. Status hanya diperbarui setelah Anda berhenti mengetik selama 500 milidetik.

Teknik ini sangat cocok untuk kotak pencarian, saat Anda hanya ingin menjalankan kueri pencarian setelah pengguna selesai mengetik istilahnya.

<!DOCTYPE html>
<html>
<head>
<title>Debouncing Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  body { font-family: sans-serif; margin: 0; padding: 20px; }
  input { padding: 8px; font-size: 16px; border: 1px solid #ccc; border-radius: 4px; width: 100%; max-width: 300px; }
  #status { background: #bbdefb; padding: 8px; margin-top: 15px; border-radius: 4px; font-size: 14px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
</style>
</head>
<body>
  <p>Type into the box. The status updates only after you pause.</p>
  <input type="text" id="myInput" placeholder="Start typing...">
  <div id="status">Last typed: (none)</div>
  <script>
    // A simple debouncing utility function
    function debounce(func, delay) {
      let timeoutId;
      return function(...args) {
        const context = this;
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => {
          func.apply(context, args);
        }, delay);
      };
    }

    $(document).ready(function() {
      const debouncedLog = debounce(function(event) {
        $('#status').text('Last typed: ' + $(event.target).val());
      }, 500); // Wait 500ms after typing stops

      $('#myInput').on('keyup', debouncedLog);
    });
  </script>
</body>
</html>

Pembatasan Laju vs. Penundaan Pemanggilan: Perbedaan Utama

Meskipun keduanya mengoptimalkan penanganan peristiwa, tujuan keduanya berbeda:

Pembatasan laju: Menjamin eksekusi fungsi secara berkala seiring waktu, meskipun peristiwa dipicu dengan cepat. Fokusnya adalah mengendalikan laju.
Penundaan pemanggilan: Memastikan fungsi hanya dijalankan setelah tidak ada aktivitas selama jangka waktu tertentu. Fokusnya adalah menunggu pengguna menyelesaikan suatu tindakan.

Pemilihan teknik yang tepat bergantung pada kasus penggunaan Anda.

Kasus Penggunaan Praktis

Berikut beberapa skenario umum untuk masing-masing teknik:

Pembatasan laju:
- Pengubahan ukuran jendela
- Pengguliran halaman
- Pergerakan seret dan lepas
- Pembaruan permainan (misalnya, menembakkan senjata)
Penundaan pemanggilan:
- Input bilah pencarian (pelengkapan otomatis)
- Validasi formulir setelah pengguna memasukkan data
- Menyimpan konten di penyunting teks
- Memicu panggilan API setelah pengguna berhenti mengetik

Mengintegrasikan dengan Peristiwa jQuery

Anda dapat dengan mudah mengintegrasikan fungsi utilitas ini dengan metode peristiwa jQuery seperti .on() atau .bind(). Cukup teruskan fungsi yang dibatasi lajunya atau ditunda pemanggilannya sebagai penangan peristiwa.

$(window).on('resize', throttle(myResizeHandler, 250));

$('#search-input').on('keyup', debounce(searchFunction, 300));

Dengan demikian, pendengar peristiwa tetap efisien dan aplikasi Anda tetap responsif.

Manfaat Kinerja

Dengan menerapkan pembatasan laju dan penundaan pemanggilan, Anda memperoleh beberapa manfaat kinerja:

Penggunaan CPU Berkurang: Lebih sedikit pemanggilan fungsi berarti lebih sedikit pekerjaan bagi peramban.
UI Lebih Lancar: Mencegah animasi tersendat atau antarmuka tidak responsif.
Pengalaman Pengguna Lebih Baik: Pengguna merasakan aplikasi yang lebih cepat dan lebih lancar.
Panggilan API yang Dioptimalkan: Mencegah backend Anda dibanjiri permintaan yang tidak diperlukan.

Pemeriksaan Singkat tentang Pengoptimalan Peristiwa

Manakah dari skenario berikut yang paling tepat ditangani menggunakan penundaan pemanggilan?

Rangkuman & Langkah Berikutnya

Kerja bagus! Anda telah mempelajari dua teknik ampuh untuk mengoptimalkan penanganan peristiwa:

Pembatasan laju: Membatasi laju pemanggilan suatu fungsi.
Penundaan pemanggilan: Menunda eksekusi fungsi hingga tidak ada aktivitas selama jangka waktu tertentu.

Menguasai teknik-teknik ini akan meningkatkan kinerja dan responsivitas aplikasi jQuery Anda secara signifikan. Bereksperimenlah dengan berbagai durasi penundaan untuk menemukan pengaturan yang paling sesuai dengan kebutuhan Anda!

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Penanganan Peristiwa dan Throttling yang Efisien” gratis?

Ya — teks lengkap “Penanganan Peristiwa dan Throttling yang Efisien” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus jQuery Academy, upgrade ke CoddyKit PRO. Kursus jQuery Academy mencakup 3 pelajaran total.

Apa yang akan aku pelajari di “Penanganan Peristiwa dan Throttling yang Efisien”?

Terapkan throttling dan debouncing peristiwa untuk peristiwa yang sering dipicu seperti perubahan ukuran atau pengguliran, sehingga pemanggilan fungsi berlebihan dapat dicegah dan responsivitas menin… Kamu berlatih jQuery 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 jQuery Academy?

Tidak diperlukan pengalaman sebelumnya. jQuery 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 2 dari 3.

Berapa lama pelajaran “Penanganan Peristiwa dan Throttling yang Efisien” 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 jQuery Academy ini?

Ya. Setiap pelajaran jQuery 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

Mengoptimalkan Operasi Manipulasi DOM
Penanganan Peristiwa dan Throttling yang Efisien
Memanfaatkan Penyimpanan Tembolok dan Objek Deferred

← Kembali ke jQuery Academy