首頁 > web前端 > js教程 > 主體

## 為什麼 JavaScript 節流函數有時會在節流時間過後再次觸發?

Linda Hamilton
發布: 2024-10-30 03:27:28
原創
572 人瀏覽過

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

JavaScript 節流函數

簡介

JavaScript 節流是一種有用的技術,可以防止函數執行過於頻繁。這在過多的函數呼叫可能導致效能問題或意外影響的情況下特別有用。

自訂節流函數

以下JavaScript 程式碼提供了可重複使用的「節流」函數:

<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);
    }
  };
}
登入後複製

修改了節流功能

但是,所提供的功能有一個明顯的缺點。節流時間過後,它會再次觸發該功能。這可能會在某些情況下導致不良行為。

可以從 underscore.js 和 lodash 等函式庫中獲得修訂版的限制功能。此版本有效解決了節流時間後觸發函數的問題:

<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>
登入後複製

簡化的節流函數

下面提供了簡化的、不可配置的節流函數版本:

<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>
登入後複製

使用此函數,您可以透過調整「limit」參數來控制函數執行的頻率。

以上是## 為什麼 JavaScript 節流函數有時會在節流時間過後再次觸發?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!