Delay di JavaScript Ternyata Simpel, Ini Cara Membuatnya

Pernah mencari fungsi sleep() seperti di PHP atau Python, tetapi tidak menemukannya di JavaScript? Tenang, delay di JavaScript adalah mekanisme yang tetap bisa dibuat dengan setTimeout(), Promise, dan async/await. Artikel ini membahas konsep, empat metode, hingga penerapannya.

Pengertian Delay di JavaScript

Delay di JavaScript adalah teknik untuk menunda eksekusi kode selama waktu tertentu tanpa menghentikan seluruh proses aplikasi. Berbeda dari PHP atau Python yang memiliki fungsi sleep(), JavaScript menggunakan setTimeout(), Promise, dan async/await untuk mengatur jeda secara asynchronous.

Kenapa JavaScript Tidak Punya Fungsi sleep() Bawaan?

JavaScript dirancang dengan model single-threaded dan non-blocking. Artinya, kode utama berjalan melalui satu thread, sehingga menghentikan seluruh proses hanya untuk membuat jeda bisa menyebabkan halaman website freeze.

Bayangkan ketika pengunjung sedang membuka website. Jika JavaScript benar-benar berhenti bekerja, tombol tidak bisa diklik, animasi terhenti, dan halaman kehilangan responsivitasnya.

Karena itu, JavaScript menggunakan pendekatan non-blocking JavaScript. Kode yang perlu ditunda cukup dijadwalkan untuk berjalan kemudian, sementara proses lainnya tetap bisa berjalan.

Baca Juga: Meta-Framework JavaScript: Bongkar Rahasia Web App Modern!

Cara Kerja Delay: Peran Event Loop JavaScript

Untuk memahami mekanismenya, kamu perlu mengenal event loop JavaScript. Ada tiga komponen penting:

• Call Stack: tempat JavaScript mengeksekusi kode.
• Task Queue: antrean callback yang siap dijalankan.
• Event Loop: memeriksa call stack dan memindahkan callback dari antrean ketika stack kosong.

Saat setTimeout() dipanggil, browser menangani timer. Setelah waktunya selesai, callback masuk ke antrean dan menunggu giliran eksekusi.

Perlu diingat, waktu delay merupakan waktu tunggu minimum, bukan waktu eksekusi yang pasti. Jika browser sedang sibuk, callback bisa berjalan lebih lambat. Bahkan, setTimeout(callback, 0) tetap harus menunggu call stack kosong.

Baca Juga: Ini Dia! Alasan JavaScript Dipilih Jadi Bahasa Andalan Web3

Fungsi Delay di JavaScript: Kapan Dibutuhkan?

Delay bukan sekadar trik untuk menunggu beberapa detik. Dalam web development, teknik ini punya beberapa kegunaan praktis, seperti:

• Menunda popup atau chat widget: memberikan kesempatan agar konten utama tampil lebih dahulu.
• Mengatur request API: memberi jarak antarpanggilan agar tidak melampaui batas permintaan server.
• Polling data: mengambil pembaruan informasi secara berkala.
• Animasi berurutan: menampilkan tooltip, notifikasi, atau elemen onboarding secara bertahap.
• Auto-close notifikasi: menghilangkan pesan setelah beberapa detik.
• Debounce pencarian: menunggu pengguna selesai mengetik sebelum mengirim request pencarian.
• Automated testing: menunggu elemen atau kondisi tertentu sebelum pengujian dilanjutkan.

Beberapa kebutuhan tersebut bisa langsung kamu terapkan di website sendiri. Sekarang, mari kenali cara membuatnya melalui empat metode berikut.

Cara Membuat Delay di JavaScript (4 Metode)

Setiap metode memiliki fungsi dan karakteristik berbeda. Berikut ringkasan penggunaannya.

#1. setTimeout(): Delay Sekali Jalan

setTimeout() merupakan cara paling sederhana untuk membuat delay di JavaScript. Fungsi ini menerima callback dan waktu tunggu dalam milidetik.

Contohnya:

console.log("Mulai");

setTimeout(() => {
  console.log("Pesan muncul setelah 2 detik");
}, 2000);

console.log("Selesai");

Hasilnya, tulisan “Mulai” dan “Selesai” akan muncul terlebih dahulu. Pesan terakhir baru tampil setelah minimal dua detik.

Perlu diperhatikan, setTimeout() tidak menghentikan program. Fungsi ini hanya menjadwalkan callback untuk dijalankan kemudian.

Kesalahpahaman yang sering terjadi adalah menganggap kode setelah setTimeout() akan menunggu timer selesai. Padahal, kode tersebut tetap berjalan seperti biasa.

#2. setInterval(): Delay yang Berulang

Jika setTimeout() hanya menjalankan callback satu kali, setInterval() digunakan untuk menjalankan fungsi secara berulang dalam rentang waktu tertentu.

Contohnya, membuat pembaruan jam digital sederhana:

setInterval(() => {
  console.log(new Date().toLocaleTimeString());
}, 1000);

Kode tersebut akan menampilkan waktu setiap satu detik.

Namun, jangan lupa menggunakan clearInterval() ketika timer sudah tidak dibutuhkan. Tanpa penghentian yang tepat, interval akan terus berjalan dan berpotensi menambah beban aplikasi.

#3. Promise: Membuat Fungsi delay(ms)

Bagaimana jika kamu membutuhkan fungsi delay yang bisa digunakan berkali-kali? Salah satu solusinya adalah menggabungkan setTimeout() dengan Promise JavaScript.

Contohnya:

function delay(ms) {
  return new Promise(resolve => {
    setTimeout(resolve, ms);
  });
}

delay(2000).then(() => {
  console.log("Dua detik kemudian");
});

Fungsi delay(ms) akan mengembalikan Promise yang selesai setelah timer berakhir.

Cara ini lebih fleksibel karena kamu tidak perlu menulis ulang setTimeout() setiap kali membutuhkan jeda. Selain itu, Promise membantu menghindari callback bersarang yang membuat kode sulit dibaca.

#4. async/await: Cara Paling Rapi dan Modern

Jika ingin menulis kode asynchronous dengan alur yang lebih mudah dipahami, kamu bisa menggabungkan fungsi delay() dengan async/await delay.

Contohnya:

function delay(ms) {
  return new Promise(resolve => {
    setTimeout(resolve, ms);
  });
}

async function jalankanProses() {
  console.log("Memeriksa data...");

  await delay(2000);

  console.log("Data berhasil diperiksa.");
}

jalankanProses();

Keyword await membuat eksekusi di dalam fungsi asynchronous tersebut menunggu sampai Promise selesai. Namun, bukan berarti seluruh aplikasi ikut berhenti. Bagian lain tetap bisa berjalan.

Pola ini banyak digunakan dalam codebase modern karena alurnya lebih mudah dibaca, terutama ketika kamu harus mengatur beberapa proses asynchronous secara berurutan.

Bonus: Delay di Node.js

Jika menggunakan Node.js 15 atau versi lebih baru, kamu bisa memanfaatkan modul node:timers/promises tanpa membuat fungsi wrapper sendiri.

import { setTimeout as delay } from 'node:timers/promises';

async function main() {
  console.log("Sedang menunggu...");

  await delay(2000);

  console.log("Selesai menunggu.");
}

main();

Sementara itu, setImmediate() dapat digunakan untuk menjadwalkan callback pada fase berikutnya dalam event loop Node.js. Fungsinya berbeda dari timer berbasis durasi, sehingga tidak bisa dianggap sebagai pengganti langsung setTimeout().

Cara Membatalkan Delay dan Kesalahan yang Perlu Dihindari

Tidak semua timer harus dibiarkan berjalan sampai selesai. JavaScript menyediakan clearTimeout() untuk membatalkan timer yang sudah dibuat.

Contohnya:

const timer = setTimeout(() => {
  console.log("Notifikasi ditutup");
}, 5000);

// Membatalkan timer
clearTimeout(timer);

Misalnya, pengguna menutup notifikasi secara manual sebelum lima detik. Kamu bisa membatalkan timer auto-close agar callback tidak dijalankan lagi.

Hal ini penting, terutama pada aplikasi single-page application (SPA), ketika komponen bisa dihapus atau di-unmount sebelum timer selesai.

Selain itu, perhatikan beberapa kesalahan berikut:

• Menempatkan setTimeout() langsung di dalam loop: timer bisa dimulai bersamaan sehingga callback berjalan hampir serentak. Gunakan async/await untuk membuat jeda berurutan.
• Menganggap setTimeout() menghentikan program: fungsi ini hanya menjadwalkan callback, bukan memblokir eksekusi.
• Lupa menggunakan clearInterval(): interval yang tidak dihentikan bisa terus berjalan meskipun sudah tidak dibutuhkan.
• Menggunakan delay terlalu sering: timer berlebihan dapat membuat aplikasi kurang efisien.
• Menganggap delay 0 ms berjalan langsung: callback tetap harus menunggu antrean eksekusi.

Delay di JavaScript pada Shared Hosting: Aman dan Ringan?

Kabar baiknya, penggunaan delay berbasis JavaScript di browser relatif aman untuk website yang menggunakan shared hosting.

Mengapa? Karena setTimeout() dan setInterval() dijalankan oleh browser pengunjung, bukan oleh server hosting. Artinya, proses penghitungan waktu tidak menambah penggunaan CPU atau RAM server.

Sebagai contoh, kamu bisa menunda pemuatan chat widget agar konten utama website tampil lebih dahulu:

setTimeout(() => {
  const script = document.createElement('script');
  script.src = 'https://contoh.com/chat-widget.js';
  script.async = true;
  document.body.appendChild(script);
}, 3000);

Namun, ada satu hal yang perlu diperhatikan. Jika setInterval() digunakan untuk memanggil API setiap beberapa detik, request tersebut tetap akan diterima server. Semakin banyak pengunjung aktif, semakin besar pula jumlah request yang harus ditangani.

Supaya tetap ringan, kamu bisa menerapkan beberapa tips berikut:

• Gunakan interval polling yang wajar, misalnya 30–60 detik jika kebutuhan aplikasinya memungkinkan.
• Hentikan timer menggunakan clearInterval() ketika tidak lagi dibutuhkan.
• Minify file JavaScript untuk mengurangi ukuran file.
• Gunakan atribut defer atau async pada script eksternal sesuai kebutuhan.
• Aktifkan kompresi Gzip atau Brotli jika tersedia di hosting.

Hindari juga menggunakan sleep() di PHP untuk sekadar menunda tampilan atau interaksi pengguna. Pada shared hosting, proses PHP yang tertahan tetap menggunakan slot proses dan dapat menghabiskan resource yang tersedia.

Kesimpulan

Membuat delay di JavaScript sebenarnya tidak sulit. Kamu bisa menggunakan setTimeout() untuk penundaan sekali jalan, setInterval() untuk eksekusi berulang, atau menggabungkan Promise dengan async/await agar kode lebih rapi dan mudah dikelola.

Hal terpenting adalah memahami cara kerja event loop dan prinsip non-blocking JavaScript. Dengan begitu, kamu bisa membuat jeda tanpa mengorbankan responsivitas website.

Untuk mempraktikkan berbagai teknik tersebut, kamu tidak harus langsung menggunakan server dengan spesifikasi tinggi. Hosting Murah dari IDwebhost bisa menjadi pilihan awal untuk mengembangkan dan menguji website JavaScript ringan. 

Dengan dukungan shared hosting yang terjangkau, kamu bisa mulai membangun website sendiri sekaligus mempelajari pengelolaan performanya secara bertahap.