jQuery Academy · Pelajaran

Pengendalian Peristiwa dan Pendikitan yang Cekap

Laksanakan pendikitan dan nyahgegaran peristiwa untuk peristiwa yang kerap dicetuskan seperti pengubahan saiz atau penatalan, bagi menghalang panggilan fungsi berlebihan dan meningkatkan responsif.

Pelajaran 2 daripada 312 langkah

Pengendalian Peristiwa dan Pendikitan yang Cekap ialah pelajaran jQuery Academy percuma di CoddyKit. Ini ialah pelajaran 2 daripada 3. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran jQuery Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus jQuery Academy merangkumi sejumlah 3 pelajaran.

Lebihan Acara: Isu Prestasi

Semasa membina aplikasi web interaktif, kita sering bergantung pada acara seperti menatal, mengubah saiz atau menaip. Acara ini mencetuskan fungsi yang mengemas kini UI atau melakukan pengiraan.

Walau bagaimanapun, jika acara ini dicetuskan terlalu kerap, ia boleh menyebabkan kesesakan prestasi, pengalaman pengguna yang lembap dan malah pelayar terhenti. Di sinilah teknik pengoptimuman menjadi penting.

Masalah: Acara Dicetuskan Dengan Pantas

Mari lihat kekerapan acara biasa seperti scroll dicetuskan tanpa sebarang pengoptimuman. Buka konsol atau perhatikan pembilang semasa anda menatal.

Perhatikan betapa pantas bilangannya meningkat, menandakan banyak panggilan fungsi dalam tempoh yang singkat. Ini boleh menjadi sangat tidak cekap.

<!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 Pendikitan

Pendikitan ialah teknik yang mengehadkan kekerapan fungsi boleh dipanggil dalam suatu tempoh. Teknik ini memastikan fungsi dilaksanakan paling banyak sekali dalam selang masa tertentu.

Bayangkan ia seperti pintu pagar yang hanya terbuka setiap 200 milisaat. Tidak kira berapa kali anda cuba melaluinya, anda hanya boleh melintas apabila pintu pagar itu terbuka.

Pendikitan Dalam Tindakan

Berikut ialah utiliti pendikitan yang mudah. Ia memastikan pengendali tatal kita dijalankan paling banyak sekali setiap 200 milisaat. Ini mengurangkan jumlah panggilan dengan ketara semasa penatalan berterusan.

Bandingkan dengan contoh sebelumnya. Pembilang dikemas kini dengan lancar tetapi kurang kerap, lalu menjimatkan sumber.

<!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 Penyahlantunan

Penyahlantunan ialah satu lagi teknik yang menangguhkan pelaksanaan fungsi sehingga tempoh tertentu berlalu sejak kali terakhir acara dicetuskan.

Bayangkan lampu yang hanya terpadam selepas anda berhenti bergerak selama 1 saat. Jika anda terus bergerak, pemasa ditetapkan semula. Fungsi hanya dijalankan selepas pengguna berhenti melakukan tindakan tersebut selama tempoh kelewatan yang ditetapkan.

Penyahlantunan Dalam Tindakan

Di sini, kita menggunakan penyahlantunan pada acara keyup bagi input teks. Status hanya dikemas kini selepas anda berhenti menaip selama 500 milisaat.

Teknik ini sesuai untuk kotak carian, apabila anda hanya mahu melakukan pertanyaan carian selepas pengguna selesai menaip 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>

Pendikitan berbanding Penyahlantunan: Perbezaan Utama

Walaupun kedua-duanya mengoptimumkan pengendalian acara, tujuan kedua-duanya berbeza:

Pendikitan: Menjamin pelaksanaan fungsi secara berkala dari semasa ke semasa, walaupun acara dicetuskan dengan pantas. Fokusnya ialah mengawal kadar.
Penyahlantunan: Memastikan fungsi hanya dilaksanakan selepas tempoh tidak aktif. Fokusnya ialah menunggu pengguna menyelesaikan sesuatu tindakan.

Pemilihan teknik yang sesuai bergantung pada kes penggunaan khusus anda.

Kes Penggunaan Praktikal

Berikut ialah situasi lazim bagi setiap teknik:

Pendikitan:
- Mengubah saiz tetingkap
- Menatal halaman
- Pergerakan seret dan lepas
- Kemas kini permainan (contohnya, menembak senjata)
Penyahlantunan:
- Input bar carian (pelengkapan automatik)
- Pengesahan borang selepas input pengguna
- Menyimpan kandungan dalam penyunting teks
- Mencetuskan panggilan API selepas pengguna berhenti menaip

Mengintegrasikan dengan Acara jQuery

Anda boleh mengintegrasikan fungsi utiliti ini dengan mudah menggunakan kaedah acara jQuery seperti .on() atau .bind(). Hanya hantarkan fungsi yang telah didikitkan atau dinyahlatunkan sebagai pengendali acara.

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

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

Ini memastikan pendengar acara anda cekap dan aplikasi anda responsif.

Manfaat Prestasi

Dengan melaksanakan pendikitan dan penyahlantunan, anda memperoleh beberapa manfaat prestasi:

Penggunaan CPU Berkurang: Panggilan fungsi yang lebih sedikit bermakna pelayar melakukan kerja yang kurang.
UI Lebih Lancar: Mengelakkan animasi yang tersekat-sekat atau antara muka yang tidak responsif.
Pengalaman Pengguna Lebih Baik: Pengguna merasakan aplikasi lebih pantas dan lancar.
Panggilan API Dioptimumkan: Mengelakkan pelayan belakang dibanjiri permintaan yang tidak diperlukan.

Semakan Pantas tentang Pengoptimuman Acara

Antara situasi berikut, yang manakah paling sesuai dikendalikan menggunakan penyahlantunan?

Jawab dalam pelajaran interaktif

Imbas Kembali dan Langkah Seterusnya

Syabas! Anda telah mempelajari dua teknik berkuasa untuk mengoptimumkan pengendalian acara:

Pendikitan: Mengehadkan kadar fungsi boleh dipanggil.
Penyahlantunan: Menangguhkan pelaksanaan fungsi sehingga tempoh tidak aktif.

Penguasaan teknik ini akan meningkatkan prestasi dan respons aplikasi jQuery anda dengan ketara. Uji kelewatan yang berbeza untuk mencari tetapan paling sesuai dengan keperluan khusus anda!

Percuma untuk bermula

Pelajari JavaScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 22
Pelajaran: 48

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Pengendalian Peristiwa dan Pendikitan yang Cekap” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran jQuery Academy, termasuk “Pengendalian Peristiwa dan Pendikitan yang Cekap”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus jQuery Academy merangkumi sejumlah 3 pelajaran.

Apakah yang akan saya pelajari dalam “Pengendalian Peristiwa dan Pendikitan yang Cekap”?

Laksanakan pendikitan dan nyahgegaran peristiwa untuk peristiwa yang kerap dicetuskan seperti pengubahan saiz atau penatalan, bagi menghalang panggilan fungsi berlebihan dan meningkatkan responsif. Anda berlatih jQuery Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan jQuery Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran jQuery Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 3.

Berapa lamakah pelajaran “Pengendalian Peristiwa dan Pendikitan yang Cekap” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran jQuery Academy ini?

Ya. Setiap pelajaran jQuery Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Mengoptimumkan Operasi Manipulasi DOM
Pengendalian Peristiwa dan Pendikitan yang Cekap
Memanfaatkan Penyimpanan Cache dan Objek Tertangguh

← Kembali ke jQuery Academy