Rumah  >  Artikel  >  hujung hadapan web  >  ## Mengapakah Fungsi Pendikit JavaScript Kadangkala Menyala Sekali Lagi Selepas Masa Pendikit Telah Berlalu?

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

Linda Hamilton
Linda Hamiltonasal
2024-10-30 03:27:28571semak imbas

##  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);
    }
  };
}

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>

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>

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!

Kenyataan:
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