节流(throttle)与防抖(debounce)

// 如果一个事件被无限制触发、会加重浏览器和服务器的负担
// 那么此时我们就需要用到节流(throttle)和防抖(debounce) 减少事件的触发时间和次数同时又不影响实际效果。
// 首先想到的是用第三方库来实现lodash
// 可以手写节流防抖

// 手写 防抖(debounce)
// 防抖为每次点击时 延迟时间都会重新执行 直到最后一次点击
    function My_debounce(fn,delay){
        let time;
        return function(){
        // 每次进来都会先结束掉setTimeout函数 
        // 所以如果频繁触发 只会执行最后一次调用
            if(time){
                clearTimeout(time)
            }
            time = setTimeout(()=>{
                // 改变fn this指向调用者
                fn.call(this)
            },delay)
        }
    }
    
// 手写 节流(throttle)
// 节流为在间隔时间段内只能执行一次
    function My_throttle(fn,delay){
        let time;
        return function(){
        // 由于判断time为空才执行 所以重复点击无法进入if判断
            if(!time){
               time = setTimeout(()=>{
                    fn.call(this)
                    // 函数执行完毕才给time为空 
                    // 所以必须等setTimeout完毕才能下次点击执行
                    time = null
                },dalay)
            }
        }
    }