Implementing Debounce in the Chatango Feature

Implementing Debounce in the Chatango Feature Yuu Desz 5 of 5

In the previous article, we discussed the basic concept of Debounce. This time, we’ll explore how this technique can be applied in we...

In the previous article, we discussed the basic concept of Debounce. This time, we’ll explore how this technique can be applied in web development, particularly within the Chatango feature.

In the Chatango script, we often encounter performance issues when users access our website. This happens because the Chatango script sends requests to the server alongside the user's activity during site access. By implementing the Debounce technique in the Chatango script, we can delay its execution until the site finishes loading, thereby reducing server load and improving overall website performance.

Here’s an example of the Chatango script before and after applying Debounce:

As shown, by applying Debounce, we can reduce the number of requests sent to the server, which lightens the load and enhances our website's performance.

Let’s begin by preparing the Chatango script we’ll use. Below is the original Chatango script that we’ll modify:

<script id="cid0020000413600701345" data-cfasync="false" async src="//st.chatango.com/js/gz/emb.js" style="width: 100%;height: 100%;">
  {"handle":"arlethdesign","arch":"js","styles":{"a":"282828","b":100,"c":"FFFFFF","d":"FFFFFF","e":"404040","g":"e0e0e0","h":"996633","j":"ffffff","k":"ffffff","l":"222222","m":"282828","n":"FFFFFF","p":"10.8","q":"282828","r":100,"usricon":0.87}} 
</script>

We only need a few key parts from this script to apply Debounce. Here’s an example of the modified Chatango script that now incorporates the Debounce technique:

<script defer='defer' type='text/javascript'>
// Fungsi debounce untuk menunda eksekusi fungsi sampai tidak ada pemicu baru dalam jeda waktu tertentu
function debounce(fn, delay = 2000) {
  let timeout; // Variabel untuk menyimpan ID timer

  return () => {
    clearTimeout(timeout); // Jika fungsi dipicu lagi, batalkan timeout sebelumnya
    timeout = setTimeout(fn, delay); // Set timeout baru untuk eksekusi fungsi setelah delay
  };
}


// Fungsi utama untuk menyisipkan Chatango chat ke dalam elemen dengan nama tag tertentu
function loadChatangoToTags(tagName) {
  // Ambil semua elemen dengan tag yang ditentukan (misalnya: <arleth-chat>)
  const targets = document.getElementsByTagName(tagName);

  // Loop setiap elemen target
  for (const target of targets) {
    // Atur ukuran elemen agar chat tampil penuh
    target.style.width = '100%';
    target.style.height = '100%';

    // Buat elemen script untuk menyisipkan chat Chatango
    const script = document.createElement('script');
    script.id = 'cid0020000413600701345'; // ID script Chatango
    script.setAttribute('data-cfasync', 'false'); // Disable Cloudflare async optimasi
    script.async = true; // Load script secara asynchronous
    script.src = '//st.chatango.com/js/gz/emb.js'; // URL script Chatango
    script.style.width = '100%'; // Lebar script
    script.style.height = '100%'; // Tinggi script

    // Konfigurasi Chatango yang akan dibaca oleh script melalui textContent
    const config = {
      handle: "arlethdesign", // Username Chatango
      arch: "js", // Mode arsitektur
      styles: {
        a: "282828", // Warna latar
        b: 100,      // Transparansi
        c: "FFFFFF", // Warna teks
        d: "FFFFFF", // Warna link hover
        e: "404040", // Warna input
        g: "e0e0e0", // Warna garis
        h: "996633", // Warna nama pengguna
        j: "ffffff", // Warna teks input
        k: "ffffff", // Warna border input
        l: "222222", // Warna background input
        m: "282828", // Warna kotak pesan
        n: "FFFFFF", // Warna teks tombol
        p: "10.8",   // Ukuran font
        q: "282828", // Warna tombol
        r: 100,      // Opacity tombol
        usricon: 0.87 // Skala ikon pengguna
      }
    };

    // Masukkan konfigurasi sebagai isi dari elemen script
    script.textContent = JSON.stringify(config);

    // Tambahkan elemen script ke dalam elemen arleth-chat
    target.appendChild(script);
  }
}

// Jalankan fungsi load setelah halaman selesai dimuat
window.addEventListener('load',
  debounce(() => {
    // Tunda eksekusi loadChatangoToTags selama 2 detik
    setTimeout(() => loadChatangoToTags('arleth-chat'), 2000);
  }, 2000) // Debounce delay selama 2 detik untuk menghindari pemicu ganda saat load
);
</script>

To display the result, we can use the following HTML code. This code will render Chatango with Debounce applied as described.

<arleth-chat></arleth-chat>

- Yuu