Akademi JavaScript · Pelajaran

Debounce berbanding Throttle — dibina sendiri

Bina utiliti debounce dan throttle yang kecil. Berlatih varian hujung dan awal, serta ketahui masa untuk memilih setiap satunya.

Pelajaran 2 daripada 38 langkah

Debounce berbanding Throttle — dibina sendiri ialah pelajaran Akademi JavaScript 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 Akademi JavaScript, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Akademi JavaScript merangkumi sejumlah 3 pelajaran.

Gambaran keseluruhan

Matlamat: Kawal peristiwa yang bising.

Nyah lantun: tunggu sehingga senyap, kemudian jalankan sekali
Pendikitan: jalankan paling banyak sekali bagi setiap selang
Panggilan awal berbanding susulan
Pembantu kecil yang mudah dibaca

Debounce berbanding Throttle — dibina sendiri — ilustrasi 1

Nyah lantun (susulan)

Nyah lantun susulan menetapkan semula pemasa pada setiap peristiwa dan berjalan sekali apabila keadaan kembali tenang.

// Debounce (trailing): run once after events stop
function debounce(fn, wait) {
  let t = null;
  return function (...args) {
    clearTimeout(t);
    t = setTimeout(function () {
      fn.apply(null, args);
    }, wait);
  };
}

// Simulate rapid events: only the last triggers the call
const debouncedLog = debounce(function (msg) {
  console.log("debounced:", msg);
}, 10);

for (let i = 0; i < 5; i++) {
  setTimeout(function () {
    debouncedLog("final after bursts");
  }, i * 3);
}

Debounce berbanding Throttle — dibina sendiri — ilustrasi 2

Nyah lantun (awal)

Nyah lantun awal dicetuskan serta-merta, kemudian menyekat ulangan sehingga tempoh senyap berakhir.

// Debounce (leading): first call fires immediately, then ignore until quiet
function debounceLeading(fn, wait) {
  let t = null;
  return function (...args) {
    if (t === null) {
      fn.apply(null, args);
    }
    clearTimeout(t);
    t = setTimeout(function () {
      t = null;
    }, wait);
  };
}

// Demo: first call prints quickly; later bursts are ignored until quiet
const firstTap = debounceLeading(function (x) {
  console.log("leading:", x);
}, 12);

for (let i = 0; i < 4; i++) {
  setTimeout(function () {
    firstTap("first-then-wait");
  }, i * 3);
}

Debounce berbanding Throttle — dibina sendiri — ilustrasi 3

Pendikitan (awal)

Pendikitan mengehadkan panggilan kepada satu bagi setiap tetingkap masa dan menggugurkan panggilan tambahan.

// Throttle (leading): at most once per interval
function throttle(fn, wait) {
  let last = 0;
  return function (...args) {
    const now = Date.now();
    if (now - last >= wait) {
      last = now;
      fn.apply(null, args);
    }
  };
}

// Demo: many events, but prints at most once every 10ms
const throttled = throttle(function (n) {
  console.log("throttled:", n);
}, 10);

for (let i = 0; i < 10; i++) {
  setTimeout(function () {
    throttled(i);
  }, i * 2);
}

Debounce berbanding Throttle — dibina sendiri — ilustrasi 4

Pendikitan (susulan)

Pendikitan susulan memastikan anda tetap menerima nilai terkini pada penghujung tetingkap.

// Throttle (trailing): schedule the last call within the window
function throttleTrailing(fn, wait) {
  let last = 0;
  let timer = null;
  let queuedArgs = null;

  function invoke(args) {
    last = Date.now();
    fn.apply(null, args);
  }

  return function (...args) {
    const now = Date.now();
    const remaining = wait - (now - last);

    if (remaining <= 0) {
      // Window passed: run now
      clearTimeout(timer);
      timer = null;
      queuedArgs = null;
      invoke(args);
    } else {
      // Queue the latest args to run at the end of the window
      queuedArgs = args;
      clearTimeout(timer);
      timer = setTimeout(function () {
        timer = null;
        if (queuedArgs) {
          invoke(queuedArgs);
          queuedArgs = null;
        }
      }, remaining);
    }
  };
}

// Demo: last value in a burst is printed after the window
const trail = throttleTrailing(function (x) {
  console.log("trail:", x);
}, 10);

for (let i = 0; i < 6; i++) {
  setTimeout(function () {
    trail("v" + i);
  }, i * 3);
}

Debounce berbanding Throttle — dibina sendiri — ilustrasi 5

Bila hendak menggunakan yang mana?

Pemilihan:

Nyah lantun: carian semasa menaip, ubah saiz — jalankan selepas pengguna berhenti.
Pendikitan: tatal/seret — hadkan panggilan kepada kadar yang stabil.
Awal untuk maklum balas segera; susulan untuk menangkap nilai akhir.

Debounce berbanding Throttle — dibina sendiri — ilustrasi 6

Kuiz nyah lantun berbanding pendikitan

Semakan ringkas: Hadkan panggilan bagi setiap tetingkap.

Debounce berbanding Throttle — dibina sendiri — ilustrasi 7

Jawab dalam pelajaran interaktif

Ringkasan

Ringkasan: Anda menulis nyah lantun susulan dan awal, pendikitan awal yang mudah, serta pendikitan susulan yang ringan. Pilih nyah lantun untuk “selepas pengguna berhenti” dan pendikitan untuk “kadar yang stabil”.

Debounce berbanding Throttle — dibina sendiri — ilustrasi 8

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: 59
Pelajaran: 200

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Debounce berbanding Throttle — dibina sendiri” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Akademi JavaScript, termasuk “Debounce berbanding Throttle — dibina sendiri”, 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 Akademi JavaScript merangkumi sejumlah 3 pelajaran.

Apakah yang akan saya pelajari dalam “Debounce berbanding Throttle — dibina sendiri”?

Bina utiliti debounce dan throttle yang kecil. Berlatih varian hujung dan awal, serta ketahui masa untuk memilih setiap satunya. Anda berlatih Akademi JavaScript 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 Akademi JavaScript?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Akademi JavaScript 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 “Debounce berbanding Throttle — dibina sendiri” 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 Akademi JavaScript ini?

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

setTimeout, setInterval dan hanyutan pemasa
Debounce berbanding Throttle — dibina sendiri
Pemasaan Animasi — pengenalan dengan gelung berasaskan masa

← Kembali ke Akademi JavaScript