JavaScriptmediumJavaScript

Throttle Function

Limits a function to be executed only once per specified time period

#function #performance #optimization #scroll

The problem

In continuously triggered events like scrolling, dragging, need to control function execution frequency

The solution

JavaScript

function throttle(func, limit) {
  let inThrottle;
  
  return function(...args) {
    if (!inThrottle) {
      func.apply(this, args);
      inThrottle = true;
      setTimeout(() => {
        inThrottle = false;
      }, limit);
    }
  };
}

Parameters

funcfunction

Function to throttle

limitnumber

Time limit in milliseconds

Put it to work

Example

// Handle scroll events
const handleScroll = throttle(() => {
  console.log('Scrolling...');
}, 1000);

window.addEventListener('scroll', handleScroll);

Keep going

Related moves.

01JS↗

Debounce Function

Prevents a function from being called too frequently, executes only the last call

function debounce(func, delay) {
  let timeoutId;
  
  return function(...args) {

#function#performance

medium

02JS↗

Debounce with Immediate Option

Debounce function with leading edge (immediate) and trailing edge options

function debounce(func, wait, options = {}) {
  const { leading = false, trailing = true, maxWait } = options;
  let timeoutId, lastCallTime, lastInvokeTime, result;
  let lastArgs, lastThis;

#debounce#performance

medium

03JS↗

Memoization Function

Cache function results to improve performance

function memoize(func, resolver) {
  const cache = new Map();
  
  return function(...args) {

#memoization#cache

medium