I'd like to have a slightly altered behavior for lodash's throttle function

Currently, if you set the wait option to 500, it will fire the underlying function at most once every 500 ms.

What I would like to have, is that the first time it’s called, it will wait 100 ms to fire, but then for subsequent calls it will only fire once every 500 ms. Then if more than 500 ms have passed since the last fire, it will go back to firing already after 100 ms for the first time.

Is there any easy way to adapt or combine some throttle and/or debounce functions together to create that kind of flow?

Stack Overflow Asked by Evert on November 15, 2021

2 Answers

2 Answers

@Jonas Wilms, thank you for your answer. I didn't really like the use of Date and I found that writing a throttle function is actually quite trivial. At first I didn't know that, because lodash's throttle function is based on their debounce function and their debounce function looks a bit complicated to me.

Anyhow, I ended up writing this function, which seems to do the job.

export function throttle(fn, ...delays) {
  let t1, t2, activeDelay = 0

  return function() {
    if (t2) {
      t2 = undefined

    if (t1) {

    t1 = setTimeout(() => {
      t1 = undefined

      // Increment the active delay each time
      // and then stick with the last one.
      activeDelay = Math.min(++activeDelay, delays.length - 1)

      // Set a 2nd `Timeout` that resets the
      // active delay back to the first one.
      t2 = setTimeout(() => {
        activeDelay = 0
        t2 = undefined
      }, delays[activeDelay])

    }, delays[activeDelay])

Answered by Evert on November 15, 2021

You could maintain a date containing the time the last call was scheduled for:

 function throttle(fn, initial, cooldown) {
   let last = 0;
   return function throttled(...args) {
    setTimeout(fn, Math.max(0, cooldown + last - (last = || initial, ...args);

Answered by Jonas Wilms on November 15, 2021

Add your own answers!

Related Questions

how to find and remove array using jquery

1  Asked on December 13, 2020 by sultan-achmad


Laravel GraphQL and Sanctum – how to combine it?

0  Asked on December 13, 2020 by kamilon123s


How to save multiple figures built with a loop and mapplot packages in r?

1  Asked on December 13, 2020 by juan-carlos-rubio-polania


Pick from both sides?

2  Asked on December 13, 2020 by helloworld


how to return only the True values?

2  Asked on December 13, 2020 by hnakashima96


multiple image galleries on one page

2  Asked on December 13, 2020 by flw


System.MissingMethodException: Method not found?

34  Asked on December 13, 2020 by user603007


Use auto for only one variable with structured binding

3  Asked on December 13, 2020 by hkon-hgland


What does the & symbol mean here and whats going on here?

4  Asked on December 13, 2020 by aarat-chopra


How to get suffix of filename in javascript quickly?

2  Asked on December 13, 2020 by daniel-stephens


Getting date for calculation

1  Asked on December 12, 2020 by faizan-gauhar


Map bash table output to array

1  Asked on December 12, 2020 by jeroen-smink


Ask a Question

Get help from others!

© 2021 All rights reserved.