Mengoptimalkan Performa JavaScript dengan Debouncing dan Throttling: Contoh Kode dan Praktik Terbaik

Debouncing dan throttling adalah dua konsep penting dalam JavaScript yang digunakan untuk mengoptimalkan performa tindakan tertentu, terutama yang dipicu oleh interaksi pengguna. Dalam artikel ini, kita akan mengeksplorasi apa saja konsep tersebut, cara kerjanya, dan memberikan potongan kode untuk mendemonstrasikan penerapannya.

Debouncing

Debouncing adalah teknik yang menunda eksekusi suatu fungsi hingga sejumlah waktu berlalu sejak terakhir kali dipanggil. Ini biasanya digunakan untuk mencegah suatu fungsi dipanggil berkali-kali secara berurutan, terutama sebagai respons terhadap input pengguna.

Katakanlah Anda memiliki bilah pencarian di situs web Anda yang menyarankan hasil pencarian saat pengguna mengetik. Setiap kali tombol ditekan, panggilan API dibuat untuk mengambil hasil pencarian. Namun, jika pengguna mengetik terlalu cepat, panggilan API mungkin dilakukan terlalu sering, menyebabkan ketegangan yang tidak perlu pada server dan memperlambat pengalaman pengguna.

Untuk menghilangkan bouncing fungsi pencarian ini, kita dapat menggunakan setTimeout()fungsi untuk menunda eksekusi panggilan API dalam jangka waktu tertentu. Jika fungsi dipanggil lagi dalam jangka waktu tersebut, timer akan direset, dan fungsi tidak akan dijalankan hingga timer telah berlalu.

<input id="input" type="text" placeholder="Search..." />
const search = document.getElementById("input");
      function debounce(func, delay) {
        let time = 0;
        return (...arg) => {
          clearTimeout(time);
          time = setTimeout(() => {
            return func(...arg);
          }, delay);
        };
      }
      search.addEventListener(
        "input",
        debounce(() => {
          console.log("Search Api called!");
        }, 1500)
      );

kami mendengarkan acara input di bidang input pencarian dan memanggil fungsi debounce. Fungsi debounce hanya akan dijalankan setelah 1500 milidetik berlalu sejak terakhir kali dipanggil.

Pelambatan

Throttling adalah teknik yang membatasi kecepatan pemanggilan suatu fungsi. Ini biasanya digunakan untuk mencegah suatu fungsi dipanggil terlalu sering, terutama sebagai respons terhadap input pengguna.

Katakanlah Anda memiliki tombol di situs web Anda yang memicu a saat diklik. Setiap kali tombol diklik, animasi dimulai lagi. Namun, jika pengguna mengklik tombol terlalu cepat, animasi dapat mulai dan berhenti berulang kali, menyebabkan efek kedipan dan pengalaman pengguna yang buruk.

<button id="btn">Click</button>
const button = document.getElementById("btn");
      const throttle = (func, delay) => {
        let prev = 0;
        return (...arg) => {
          let curr = new Date().getTime();
          if (curr - prev > delay) {
            prev = curr;
            return func(...arg);
          }
        };
      };
      button.addEventListener(
        "click",
        throttle(() => {
          console.log("Button is clicked");
        }, 1500)
      );