JavaScript a couple of js debounce questions

[edwardsmarkf]

hello all -

having studied these two excellent examples:

Debouncing in JavaScript | How to delay a function call - Dillion's Blog

Debouncing in JavaScript is a technique used to reduce the rate at which a function is called and helps to improve performance in an application.

dillionmegida.com

Debounce – How to Delay a Function in JavaScript (JS ES6 Example)

By Ondrej Polesny In JavaScript, a debounce function makes sure that your code is only triggered once per user input. Search box suggestions, text-field auto-saves, and eliminating double-button clicks are all use cases for debounce. In this tutoria...

www.freecodecamp.org

surprisingly neither of them included how to pass the event information to the debounced script. here is what i cobbled together:

element.addEventListener('keyup', (event) =>    {
    processChange(event);   // notice event has been added

function debounce(func, timeout = 300){
        let timer;
        return (...args) => {
                clearTimeout(timer);
                timer = setTimeout(() => { func.apply(this, args); }, timeout);
        };
}

function saveInput(event){   //  event is available here
        console.log('Saving data' + event.target.value );
}

const processChange = debounce((event) => saveInput(event));  // event is passed along here

1) any thought or opinions on how i was able to pass the event information to the debounced function?
2) debounce & throttle both appear to be exceptionally useful. has there been any thoughts on including these as addEventListener options? perhaps something like keyupDelay ?

it may available in jQ and lodash, etc, but hopefully both debounce and throttle will become available in native js at some point.

 

[edwardsmarkf]

this is very pecular, but somehow the event is being switched to the parent element. so instead i am doing this:

element.addEventListener('keyup', (event) =>    {
    processChange(event.currentTarget, event.target));   // notice event has been added

function debounce(func, timeout = 300){
        let timer;
        return (...args) => {
                clearTimeout(timer);
                timer = setTimeout(() => { func.apply(this, args); }, timeout);
        };
}

function saveInput(eventCurrentTarget, eventTarget)){   //  event is available here
        console.log('Saving data' + eventTarget.value );
}

const processChange = debounce((eventCurrentTarget, eventTarget) => saveInput(eventCurrentTarget, eventTarget));  // event stuff is passed along here