## Mengapakah Fungsi Pendikit JavaScript Kadangkala Menyala Sekali Lagi Selepas Masa Pendikit Telah Berlalu?

Linda Hamilton
Lepaskan: 2024-10-30 03:27:28
asal
572 orang telah melayarinya

##  Why Do JavaScript Throttle Functions Sometimes Fire Once More After the Throttle Time Has Elapsed?

Fungsi Pendikit JavaScript

Pengenalan

Pendikitan JavaScript ialah teknik berguna yang boleh menghalang fungsi daripada dilaksanakan terlalu kerap. Ini boleh memberi manfaat terutamanya dalam situasi di mana panggilan fungsi yang berlebihan boleh menyebabkan isu prestasi atau kesan yang tidak diingini.

Fungsi Pendikit Tersuai

Kod JavaScript berikut menyediakan fungsi "pendikit" yang boleh digunakan semula:

<code class="javascript">function throttle(fn, threshhold, scope) {
  threshhold || (threshhold = 250);
  var last,
      deferTimer;
  return function () {
    var context = scope || this;

    var now = +new Date,
        args = arguments;
    if (last &amp;&amp; now < last + threshhold) {
      // hold on to it
      clearTimeout(deferTimer);
      deferTimer = setTimeout(function () {
        last = now;
        fn.apply(context, args);
      }, threshhold);
    } else {
      last = now;
      fn.apply(context, args);
    }
  };
}
Salin selepas log masuk

Fungsi Pendikit yang Disemak

Walau bagaimanapun, fungsi yang disediakan mempunyai kelemahan yang ketara. Selepas masa pendikit telah berlalu, ia menghidupkan fungsi sekali lagi. Ini boleh membawa kepada tingkah laku yang tidak diingini dalam senario tertentu.

Versi semakan fungsi pendikit tersedia daripada perpustakaan seperti underscore.js dan lodash. Versi ini berkesan menangani isu menyalakan fungsi selepas masa pendikit:

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

Fungsi Pendikit Dipermudah

Versi fungsi pendikit yang dipermudahkan dan tidak boleh dikonfigurasikan disediakan di bawah:

<code class="javascript">function throttle (callback, limit) {
    var waiting = false;                      // Initially, we're not waiting
    return function () {                      // We return a throttled function
        if (!waiting) {                       // If we're not waiting
            callback.apply(this, arguments);  // Execute users function
            waiting = true;                   // Prevent future invocations
            setTimeout(function () {          // After a period of time
                waiting = false;              // And allow future invocations
            }, limit);
        }
    }
}</code>
Salin selepas log masuk

Dengan fungsi ini, anda boleh mengawal kekerapan pelaksanaan fungsi dengan melaraskan parameter "had".

Atas ialah kandungan terperinci ## Mengapakah Fungsi Pendikit JavaScript Kadangkala Menyala Sekali Lagi Selepas Masa Pendikit Telah Berlalu?. 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
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!