Bagaimana untuk Melaksanakan Fungsi Pendikit Mudah dalam JavaScript tanpa Perpustakaan Luaran?

Patricia Arquette
Lepaskan: 2024-10-25 06:41:02
asal
1036 orang telah melayarinya

How to Implement a Simple Throttle Function in JavaScript without External Libraries?

Pendikit Mudah dalam JavaScript tanpa Perpustakaan Luaran

Pengenalan

Dalam JavaScript, pendikit ialah teknik yang digunakan untuk mengehadkan kadar di mana fungsi boleh dilaksanakan.

Fungsi Pendikit Tersuai

Fungsi pendikit tersuai yang disediakan, walaupun berfungsi, mempunyai kecacatan kerana ia menyalakan fungsi sekali lagi selepas masa pendikit selesai. Berikut ialah versi yang diperhalusi:

<code class="js">function throttle(fn, wait, options) {
  if (!options) options = {};
  var context,
    args,
    result,
    timeout = null,
    previous = 0;
  var later = function () {
    previous = options.leading === false ? 0 : Date.now();
    timeout = null;
    result = fn.apply(context, args);
    if (!timeout) context = args = null;
  };
  return function () {
    var now = Date.now();
    if (!previous && options.leading === false) previous = now;
    var remaining = wait - (now - previous);
    context = this;
    args = arguments;
    if (remaining <= 0 || remaining > wait) {
      if (timeout) {
        clearTimeout(timeout);
        timeout = null;
      }
      previous = now;
      result = fn.apply(context, args);
      if (!timeout) context = args = null;
    } else if (!timeout && options.trailing !== false) {
      timeout = setTimeout(later, remaining);
    }
    return result;
  };
}</code>
Salin selepas log masuk

Versi ini menangani isu dengan mencetuskan berbilang selepas tempoh pendikit dengan melaksanakan pilihan yang boleh disesuaikan untuk gelagat terdepan dan mengekori.

Fungsi Pendikit Dipermudahkan

Jika anda tidak memerlukan pilihan lanjutan, fungsi pendikit yang mudah dan tidak boleh dikonfigurasikan tersedia:

<code class="js">function throttle(callback, limit) {
  var waiting = false;
  return function () {
    if (!waiting) {
      callback.apply(this, arguments);
      waiting = true;
      setTimeout(function () {
        waiting = false;
      }, limit);
    }
  };
}</code>
Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Fungsi Pendikit Mudah dalam JavaScript tanpa Perpustakaan Luaran?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan