Debounce

function debounce(fn, delay){
    let timer ;
    return function(...args){
        //['S']
        console.log(Array.isArray(args) )
        clearTimeout(timer);
        timer = setTimeout(function(){
            fn(...args)
        },delay)
    }
}

const debounceWrapper = debounce(searchFn,1000);


const searchInput = document.getElementById("searchBar");

searchInput.addEventListener("input",(event)=>{
    const value = event.target.value;
    debounceWrapper(value);
})

// SOAP
// one letter will get typed per 250 ms 

// S - timer to
// SO - clear timer to and sets timer to t1
// SOA - clears timer t1 and sets timer to t2 - 750ms
// SOAP - clears timer t2 , set timer to t3 - 1000ms
// after 1000 i.e t3 search api will get hit to fetch results

function leadingDebounce(fn,delay){
    let timer ;

    return function(...args){
        if(!timer){
            fn(...args);
        }
        clearTimeoout(timer);
        timer = setTimeout(()=>{
            timer = null
        },delay)
    }

 
}


// what happens if we dont clear timer in leading debounce ??
//  delay assume 1000ms 
// at 0ms first execution as there is no timer - creates a timer t0 with delay 1000ms
// at 500ms another click -as t0 exist function wont execute, would create another timer t1 with 1000ms 
// at 1000ms t0 timer will set timer to null 
//  at 1100ms another click happened as timer is null execution happens 
// leading debounce should delay next execution after first execution as long as activity exists , but here execution happens even with activity because we are not clearing timers, each activity in leading debounce should clear previous timer and sets a new one