**Why does the Simple JavaScript Throttle Function Eliminate the Final Execution After the Throttle Period?**

Simple Throttling in JavaScript

JavaScript provides various tools for throttling functions, including lodash and underscore. However, for instances where these libraries may be excessive, a custom throttling implementation is desirable.

Existing Throttle Function and Challenges

The provided throttle function is functional, but it presents an issue. After the throttle period expires, it executes the function one final time. This can lead to unwanted behavior in scenarios where the function should not fire multiple times.

Improved Throttle Function

To address this issue, consider the following enhanced throttle function that eliminates the final execution after the throttle period:

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 && 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;
  };
};

This updated function provides a configurable throttling mechanism with optional parameters for leading and trailing edge triggering.

Simplified Throttle Function

If customizability is not required, a simpler throttle function is as follows:

function throttle (callback, limit) {
    var waiting = false; 
    return function () { 
        if (!waiting) { 
            callback.apply(this, arguments); 
            waiting = true; 
            setTimeout(function () { 
                waiting = false; 
            }, limit);
        }
    }
}

This non-configurable function throttles the target function to a specified time interval without the need for complex options.

The above is the detailed content of **Why does the Simple JavaScript Throttle Function Eliminate the Final Execution After the Throttle Period?**. For more information, please follow other related articles on the PHP Chinese website!