InsideDarkWeb.com

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) {
      clearTimeout(t2)
      t2 = undefined
    }

    if (t1) {
      return
    }

    t1 = setTimeout(() => {
      fn(...arguments)
      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 = Date.now())) || 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 InsideDarkWeb.com. All rights reserved.