Home > Web Front-end > JS Tutorial > body text

Here are a few question-based titles that fit the content of your article: * **How Can I Implement Simple Throttling in JavaScript?** * **What\'s the Best Way to Throttle a JavaScript Function?** *

Mary-Kate Olsen
Release: 2024-10-25 08:54:28
Original
854 people have browsed it

Here are a few question-based titles that fit the content of your article:

* **How Can I Implement Simple Throttling in JavaScript?** 
* **What's the Best Way to Throttle a JavaScript Function?**
* **Need to Prevent Overwhelm? Here's How to Throttle Yo

Simple Throttling in JavaScript

In JavaScript, throttling is a technique to limit the execution of a function to a specific time interval. This is useful when you want to avoid overwhelming the system with excessive function calls.

Existing Throttle Implementations

Libraries like lodash and underscore provide built-in throttling functions. However, including these entire libraries for a simple task can be redundant.

A Custom Throttle Function

Here's a custom throttle function that can be used as a standalone solution:

<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);
    }
  };
}
Copy after login

Improvement: Avoiding Duplicate Execution

The provided code, however, exhibits an issue where it may fire the function again once the throttle interval has elapsed. To address this, we can modify the function as follows:

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

    var now = +new Date;
    if (now < last + threshhold) {
      return; // prevent subsequent execution
    }

    last = now;
    fn.apply(context, arguments);
  };
}
Copy after login

Advanced Throttle Function

For more flexibility and additional options, you can refer to the following implementation:

<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>
Copy after login

The above is the detailed content of Here are a few question-based titles that fit the content of your article: * **How Can I Implement Simple Throttling in JavaScript?** * **What\'s the Best Way to Throttle a JavaScript Function?** *. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!