JavaScript debounce/rate limiter module

See documentation inside the module, or visit the gist page.

For this demo, a script (updateScrollPos()) is attached to the window's scroll event. The scroll event fires very rapidly, so it makes for a good debouncing (rate limiting) demo.

Scroll the page, and in the overlay you can see how various methods of debouncing are applied, along with their results. At the top of the list, you can see the output of the unbounced function (raw). A yellow 'flash' indicates an element has been updated (ie. the debounced script is executed). The counter keeps track of how many times the function was executed; note the differences.

This is the function that is being called; a simple function that updates an element with the window's current scrollposition, and updates a counter to keep track of how often the function was called:

function updateScrollPos(id) {
    //write scroll position of window to element with supplied id
    let target = document.getElementById(id);
    target.innerHTML = window.scrollY;

    //update tally
    let counter = document.getElementById(id + '-counter');
    if (counter) counter.innerHTML = parseInt(counter.innerHTML, 10) + 1;

    //briefly highlights the element when it's updated
    target.classList.add('updated');
    if (target.timer) clearTimeout(target.timer);
    target.timer = setTimeout(function(){
      target.classList.remove('updated');
    }, 200);
}

This function is bound to the window's 'scroll' event (default timeout is 150):

//raw, undebounced
window.addEventListener('scroll', (e)=>{
    updateScrollPos('raw-scroll');
});

//on start and on end of scrolling
window.addEventListener('scroll', debounceThis((e)=>{
    updateScrollPos('on-start-end-scroll')
}, {execStart: true, execWhile: false, execDone: true}))

//on start of scrolling
window.addEventListener('scroll', debounceThis((e)=>{
    updateScrollPos('on-start-scroll')
}, {execStart: true, execWhile: false, execDone: false}))

//during scrolling
window.addEventListener('scroll', debounceThis((e)=>{
    updateScrollPos('during-scroll')
}, {execStart: false, execWhile: true, execDone: false}))

//on end of scrolling
window.addEventListener('scroll', debounceThis((e)=>{
    updateScrollPos('after-scroll')
}, {execStart: false, execWhile: false, execDone: true}))

//at all times
window.addEventListener('scroll', debounceThis((e)=>{
    updateScrollPos('all-scroll')
}, {execStart: true, execWhile: true, execDone: true}))

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et magna id nibh scelerisque convallis. Aliquam ultricies euismod ligula ut dignissim. Aliquam sapien dui, pretium sed magna in, placerat lobortis justo. Proin pretium suscipit leo ut congue. Nullam id vulputate diam. Aliquam tincidunt massa nisi, ac dapibus ex porta eu. Sed sagittis condimentum lorem vitae aliquet. Aenean tempor posuere turpis, ultricies dapibus elit lobortis sed. Etiam vel sem tellus. Curabitur commodo diam mauris, ut eleifend erat ullamcorper a. Suspendisse ultrices metus interdum euismod dictum.

Etiam vulputate, justo sed maximus fermentum, arcu velit fringilla nibh, sit amet dignissim tellus diam vitae ligula. Duis id ante pulvinar, euismod mi vel, mollis elit. Morbi vitae dui eget nibh gravida vestibulum. In varius erat at ullamcorper condimentum. Curabitur ultricies feugiat enim, eu bibendum leo fermentum at. Nam vitae libero vel magna aliquet viverra quis cursus eros. Vivamus ultricies, nulla non tincidunt pellentesque, tortor nisl facilisis eros, ac ultricies neque metus vitae sapien. Morbi interdum et orci in vestibulum. Mauris pulvinar ullamcorper sodales. Donec condimentum elementum ligula eu pellentesque. Etiam eget quam at mauris finibus blandit id ut est. Etiam bibendum nisl feugiat, aliquam ipsum ac, mattis erat. Curabitur nunc ante, faucibus non vulputate quis, cursus tristique ipsum.

Donec libero leo, congue et condimentum et, dignissim ut purus. Fusce vitae est elit. Morbi facilisis imperdiet felis vitae hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pellentesque congue ipsum commodo pretium. Sed quis lorem diam. Morbi dictum sed eros ut accumsan. Praesent sit amet nulla at nibh porta feugiat. Pellentesque faucibus sem a felis facilisis, vitae viverra ligula mattis. Maecenas id lectus vel eros blandit porta non et tortor. Nam sem enim, viverra a lobortis et, molestie ac mi. Suspendisse ac tincidunt orci. Pellentesque eu rutrum nisl. Aenean at egestas purus. Ut elementum enim nec quam ornare, eu vestibulum metus eleifend. Donec at mollis sem.

Donec feugiat lacinia quam et faucibus. Quisque efficitur lectus in auctor porta. Sed non porta erat, ac vehicula odio. Nam a fermentum magna. Nunc vel vestibulum erat. Phasellus elementum nisi a lorem congue placerat. Cras posuere urna massa, quis molestie nulla scelerisque ut. In id dignissim arcu.

In consequat luctus dictum. Ut luctus laoreet dolor in efficitur. Suspendisse eget eros lectus. Suspendisse vitae ornare massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas luctus, est eu venenatis facilisis, mauris neque eleifend risus, vel accumsan ligula metus eu turpis. Donec consequat et odio at semper. Nullam sollicitudin molestie tellus, ut scelerisque ex venenatis sed. Sed et tortor venenatis, mollis metus a, mattis arcu. Sed commodo diam et porta hendrerit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;

Integer est elit, porttitor ac laoreet eget, varius vel magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Mauris tortor orci, tempor at magna eget, faucibus dictum felis. Praesent sed venenatis tellus. Etiam gravida tortor vitae nulla fermentum, et bibendum turpis ornare. Nullam a sollicitudin sapien. Praesent a ligula aliquam, dictum risus at, elementum quam. In pretium, nulla eget tempor congue, est ipsum congue libero, vitae gravida diam leo nec diam. Nunc eget ultrices dolor. Vivamus viverra eros volutpat ipsum sagittis, et elementum enim congue. Aliquam sed neque tincidunt, facilisis eros eget, placerat turpis. Maecenas ultricies sagittis orci, porttitor imperdiet odio. Ut laoreet aliquet enim, et molestie arcu venenatis vitae.

Donec condimentum libero efficitur, sodales tellus vitae, vulputate nunc. Mauris at mi tincidunt, hendrerit massa eget, congue neque. Nulla facilisi. Morbi dapibus, elit tempus ullamcorper vestibulum, velit massa rhoncus turpis, venenatis ullamcorper nisl elit at odio. Nam viverra posuere purus et commodo. Donec dignissim purus eu varius iaculis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus est enim, pretium eget suscipit a, ullamcorper nec diam.

Nunc hendrerit nec nisi quis congue. Donec mollis laoreet posuere. Cras aliquam felis sit amet feugiat efficitur. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed rhoncus dui orci. Sed mattis accumsan enim, tempor scelerisque turpis tempus vitae. Phasellus libero mi, feugiat vel ex malesuada, vulputate mollis velit. Donec facilisis elit sollicitudin ex suscipit, vitae accumsan massa pharetra. Cras eleifend auctor ipsum sit amet pharetra. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed neque nunc. Donec dignissim sapien quis massa convallis, sit amet mattis lorem pharetra. In nulla mi, elementum sit amet ullamcorper gravida, imperdiet non risus. Nam convallis odio eget massa egestas lacinia.

Sed porta interdum est, non consectetur massa tempus id. Morbi et dolor varius, eleifend nulla non, dictum purus. Curabitur fringilla elementum nisl vehicula mollis. Praesent placerat condimentum ornare. Nullam tristique nibh a quam egestas lobortis in eget sem. Nulla nunc orci, mattis at urna id, fermentum condimentum lorem. Nullam blandit lectus sapien, vitae scelerisque sem condimentum et. Nunc gravida varius finibus. Vivamus mollis placerat elit et varius. Pellentesque vel justo tincidunt, tincidunt turpis a, dapibus libero. Maecenas volutpat sapien non sapien condimentum, vitae semper tellus consequat.

Donec at ipsum tincidunt, vehicula risus nec, tempor orci. Fusce pulvinar enim quam, non consectetur velit ornare a. Praesent vitae orci sed elit vulputate sollicitudin. Nulla lorem neque, vehicula non justo vitae, auctor maximus velit. Sed sed elit leo. Mauris vitae ligula elit. Pellentesque tortor lacus, vestibulum at feugiat eget, aliquet quis tortor. Sed fringilla leo et orci gravida, ut auctor arcu tempor. Aenean vehicula leo ac congue cursus. Sed commodo, odio eu ultrices placerat, magna velit posuere felis, venenatis tempor felis nisl id ipsum. Quisque in lectus id sem faucibus fermentum. Vivamus congue hendrerit efficitur. Integer lacinia pellentesque volutpat. Fusce a lectus diam. Proin massa erat, dictum in pulvinar vitae, maximus id orci.

Nullam sodales ut massa ac euismod. Mauris pharetra sem at erat sollicitudin egestas vel nec nulla. Morbi tincidunt nec tellus quis sodales. Cras volutpat nibh risus, nec pretium tellus porttitor et. Vestibulum condimentum porta neque, sit amet volutpat mauris ultrices sagittis. Donec sed sem nec nisi pharetra sollicitudin eget vel erat. Morbi magna eros, iaculis quis pretium ac, tempus et nisl. Mauris ultricies leo dolor. Aenean ut ullamcorper eros. Praesent maximus placerat sodales. Donec sodales ipsum at nulla viverra, ut rutrum quam molestie.

Phasellus pulvinar congue augue a commodo. Vestibulum eu justo accumsan, viverra dui id, dictum dui. Cras scelerisque nisi dui, ac molestie metus efficitur vel. Nunc condimentum in leo a fermentum. Fusce ultrices augue consequat mi sollicitudin ullamcorper. Suspendisse felis nisl, elementum vel quam in, bibendum ullamcorper leo. Duis quis nunc porttitor, luctus erat vitae, vulputate arcu. Sed a mauris posuere, dapibus turpis aliquet, efficitur libero. Cras accumsan neque non eleifend eleifend. Cras vestibulum tincidunt justo. Morbi sapien nibh, ornare a urna eget, dictum pellentesque massa. Phasellus facilisis risus lacus, sit amet facilisis purus mollis sed. Donec euismod non augue eget interdum. In in blandit eros. Etiam nec vestibulum eros. Donec ullamcorper neque quis diam faucibus, et lobortis odio rutrum.

Nunc condimentum erat quis lacinia commodo. Proin aliquam mi at massa facilisis condimentum. Nam porttitor, nisl eget ultrices dignissim, nibh leo vulputate enim, in venenatis eros arcu at lectus. Suspendisse et purus a nibh pulvinar iaculis. Nam sagittis, risus quis pulvinar bibendum, justo tellus lacinia ligula, vitae consequat ipsum arcu a elit. Sed ornare molestie mauris ut dapibus. Morbi vitae eleifend ipsum, at sagittis justo. Integer luctus orci et ligula volutpat lobortis. Vestibulum quis ipsum libero. Nam interdum est sit amet risus tempus, ut placerat elit cursus. Ut tristique finibus elit, vitae porttitor est dignissim tincidunt. Nulla gravida convallis risus a tempor. Nullam mattis justo at enim pretium varius. Sed bibendum mollis ex ut tempor. Nulla facilisi.

Quisque lacinia malesuada turpis, vitae ultricies neque pulvinar eget. Sed lobortis urna a augue aliquet, a semper metus consectetur. Quisque at neque justo. Nullam quis orci sed libero imperdiet gravida. Ut quis ligula orci. Sed vitae consequat nisl. Pellentesque ac arcu vehicula, congue risus at, facilisis nunc. Cras sit amet ligula eu leo dignissim porta.

Vestibulum consequat elit eros, in fermentum enim tincidunt eu. Curabitur volutpat luctus dolor, eget pretium sapien viverra id. Cras vel sodales dolor. Donec malesuada rhoncus rhoncus. Nunc gravida ac enim non luctus. Integer hendrerit id neque in rhoncus. Morbi nec felis arcu. Pellentesque felis nulla, tristique vitae scelerisque ac, eleifend quis dolor. Duis non tellus et tortor vehicula placerat eu eu turpis. In ullamcorper luctus tortor et aliquam.

scrollposition raw

scrollposition debounced

JavaScript debounce/rate limiter module