0Pricing
JavaScript Academy · Pelajaran

setTimeout, setInterval, dan Penyimpangan Pewaktu

Jadwalkan tugas sekali jalan dan berulang dengan setTimeout/setInterval, lalu pelajari teknik sederhana untuk mengurangi penyimpangan pewaktu

setTimeout, setInterval, dan Penyimpangan Pewaktu adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 1 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 JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 3 pelajaran total.

Pengenalan pengatur waktu

Tujuan: Menjadwalkan pekerjaan dengan rapi.

  • setTimeout: menjalankan nanti (sekali)
  • setInterval: menjalankan berulang kali
  • Drift: alasan pengatur waktu dapat meleset
  • Perbaikan drift sederhana
setTimeout, setInterval, dan Penyimpangan Pewaktu — ilustrasi 1

setTimeout — sekali jalan

setTimeout(fn, ms) berjalan sekali setelah penundaan (waktu minimum, bukan waktu yang tepat).

// setTimeout schedules a one-off callback
console.log("A: start");

setTimeout(function () {
  console.log("B: after ~5ms");
}, 5);

console.log("C: scheduled");
setTimeout, setInterval, dan Penyimpangan Pewaktu — ilustrasi 2

setInterval — berulang

setInterval berulang secara otomatis; gunakan clearInterval(id) untuk menghentikannya.

// setInterval repeats; always clear it
let count = 0;

const id = setInterval(function () {
  count = count + 1;
  console.log("tick", count);

  // Stop after 3 ticks to avoid endless logs
  if (count >= 3) {
    clearInterval(id);
    console.log("stopped");
  }
}, 5);
setTimeout, setInterval, dan Penyimpangan Pewaktu — ilustrasi 3

Lihat drift terjadi

Jeda sebenarnya bervariasi; pekerjaan, beban perangkat, dan perulangan peristiwa menyebabkan drift.

// Drift demo: expected vs actual timing
const targetMs = 5;
let last = Date.now();
let times = 0;

const driftId = setInterval(function () {
  const now = Date.now();
  const gap = now - last; // actual gap
  last = now;
  times = times + 1;
  console.log("gap~", gap, "ms");

  if (times >= 3) {
    clearInterval(driftId);
    console.log("done");
  }
}, targetMs);
setTimeout, setInterval, dan Penyimpangan Pewaktu — ilustrasi 4

Penjadwalan selaras

Selaraskan dengan waktu expected yang terus bergerak: hitung penundaan berikutnya dari waktu tersebut agar kesalahan tidak terus terakumulasi.

// Simple drift fix: schedule from the expected time
const step = 5;
let expected = Date.now() + step;
let ticks = 0;

function tick() {
  ticks = ticks + 1;
  const now = Date.now();
  const drift = now - expected; // positive if we are late
  console.log("drift:", drift, "ms");

  // Compute next expected time first
  expected = expected + step;

  // Next delay = time until the next expected timestamp
  const nextDelay = Math.max(0, expected - Date.now());

  if (ticks < 3) {
    setTimeout(tick, nextDelay);
  } else {
    console.log("aligned stop");
  }
}

setTimeout(tick, step);
setTimeout, setInterval, dan Penyimpangan Pewaktu — ilustrasi 5

Kiat dan daftar periksa

Kiat:

  • Selalu gunakan clearInterval saat selesai.
  • Utamakan perulangan setTimeout yang selaras agar iramanya stabil.
  • Buat fungsi panggilan balik pengatur waktu tetap singkat untuk mengurangi drift.
setTimeout, setInterval, dan Penyimpangan Pewaktu — ilustrasi 6

Kuis perbaikan drift

Pemeriksaan singkat: Mengurangi drift.

setTimeout, setInterval, dan Penyimpangan Pewaktu — ilustrasi 7

Ringkasan

Ringkasan: Gunakan setTimeout untuk tugas sekali jalan, setInterval untuk pengulangan (ingat untuk menghapusnya), dan kurangi drift dengan menyelaraskan proses berikutnya ke waktu yang diharapkan.

setTimeout, setInterval, dan Penyimpangan Pewaktu — ilustrasi 8

Pertanyaan yang Sering Diajukan

Apakah pelajaran “setTimeout, setInterval, dan Penyimpangan Pewaktu” gratis?

Ya — teks lengkap “setTimeout, setInterval, dan Penyimpangan Pewaktu” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 3 pelajaran total.

Apa yang akan aku pelajari di “setTimeout, setInterval, dan Penyimpangan Pewaktu”?

Jadwalkan tugas sekali jalan dan berulang dengan setTimeout/setInterval, lalu pelajari teknik sederhana untuk mengurangi penyimpangan pewaktu Kamu berlatih JavaScript 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 JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript 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 1 dari 3.

Berapa lama pelajaran “setTimeout, setInterval, dan Penyimpangan Pewaktu” 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 JavaScript Academy ini?

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

  1. setTimeout, setInterval, dan Penyimpangan Pewaktu
  2. Debounce vs Throttle — Buatan Sendiri
  3. Pengaturan Waktu Animasi — Pengantar dengan Perulangan Berbasis Waktu
← Kembali ke JavaScript Academy