Add delay(fn, timeout) Higher-Order Function

[semmel]

The explanation of debounce and throttle and the visual demo in your original blog post are just great! I felt I really had to see my delay higher order function in that timeline. It just delays normal execution of the original function. In the elevator analogy it is a time-shifted one-person-cabin (i.e. the person travels forward in time).

function delayed(func, timeout)
{ 
   return lo.compose(lo.partialRight(setTimeout, timeout), func.bind.bind(func, func));
}

Maybe it is not much, but if you do functional stuff in Javascript you can't without it. It is missing from Lodash's function utilities, so I have to start my own collection…

Thank you for the demo

[dcorb]

Thanks a lot Matthias,

I'm sorry that I didn't reply before, I left it for "tomorrow", and I forgot.

I'm thinking to update the article, because those functions have changed a bit also in lodash and underscore. So I will add also your suggestion

I hope to do it soon.

Cheers! David

David Corbacho

On Tue, Oct 22, 2013 at 12:51 AM, Matthias Seemann <[email protected]

wrote:

The explanation of debounce and throttle and the visual demo in your original blog post are just great! I felt I really had to see my delay higher order function in that timeline. It just delays normal execution of the original function. In the elevator analogy it is a time-shifted one-person-cabin (i.e. the person travels forward in time).

function delayed(func, timeout){ return lo.compose(lo.partialRight(setTimeout, timeout), func.bind.bind(func, func));}

Maybe it is not much, but if you do functional stuff in Javascript you can't without it. It is missing from Lodash's function utilities, so I have to start my own collection…

Thank you for the demo

You can merge this Pull Request by running

git pull https://github.com/semmel/debounce-throttle master

Or view, comment on, or merge it at:

https://github.com/dcorb/debounce-throttle/pull/1 Commit Summary

• - added delayed(fn, timeout) - a higher-order function which creates a delayed version of the given function
• Screenshot, Readme

File Changes

• M README.mdhttps://github.com/dcorb/debounce-throttle/pull/1/files#diff-0(6)
• A ScreenShot.pnghttps://github.com/dcorb/debounce-throttle/pull/1/files#diff-1(0)
• M index.htmlhttps://github.com/dcorb/debounce-throttle/pull/1/files#diff-2(9)
• M lodash.jshttps://github.com/dcorb/debounce-throttle/pull/1/files#diff-3(10257)
• M main.jshttps://github.com/dcorb/debounce-throttle/pull/1/files#diff-4(9)

Patch Links:

• https://github.com/dcorb/debounce-throttle/pull/1.patch
• https://github.com/dcorb/debounce-throttle/pull/1.diff

[semmel]

Hi David,

I myself have postponed a write up of this topic for some time now. Hope I can carve out some free time to do it. Do you permit the use of your visualisation in a blog post on my homepage?

In the mean time I reviewed my pull request and found two things:

• First, about the delayed execution implementation: If you assume "modern" browsers (i.e. IE10+) then this is probably easier to understand:

function delay(f, dt){
    return function(){ 
        setTimeout.apply(window, [f, dt].concat(Array.prototype.slice.call(arguments, 0))); 
    }; 
} 

• Second, I added a sequenced function execution variant.

If in the elevator analogy the delayed execution can be thought of as an one-person cabin of infinite speed, the sequenced variant can be imagined as one-person cabin of limited speed. I hope it becomes clear watching the visualisation.

Cheers! Matthias