函数的截流和防抖

概念

• 函数防抖和函数节流都是防止某一时间频繁触发，但是这两兄弟之间的原理却不一样。
• 防抖是某一段时间内只执行一次（人话：两次操作间隔时间太短不触发，间隔时间超过设定的最小间隔时间才触发），节流是间隔时间执行（人话：限制触发频率，均匀的触发）。

　　防抖 (Debouncing) 的含义是指在一定时间内，多次触发同一个事件，只执行最后一次操作。例如，当我们在搜索框中输入关键词时，输入框会不断触发 oninput 事件，如果每次输入都去请求服务器获取数据，会造成不必要的请求浪费。此时就可以使用防抖技术，将一定时间内的多次触发合并为一次操作，只请求一次服务器数据，减少了请求次数和服务器负载。

　　节流 (Throttling) 的含义是指在一定时间内，多次触发同一个事件，只执行第一次操作。例如，当我们拖动网页上的滚动条时，会不断触发 onscroll 事件，如果每次触发都去计算滚动距离，会造成浏览器性能下降。此时就可以使用节流技术，将一定时间内的多次触发限制为一次操作，只计算一次滚动距离，提高了浏览器性能和用户体验。

实现

// 防抖：某一段时间内只执行一次
function debounce(fnc, wait = 50) {
        // 通过闭包缓存一个定时器 id
        let timer:any = null
        // 将 debounce 处理结果当作函数返回
        // 触发事件回调时执行这个返回函数
        return function(...args) {
              // 如果已经设定过定时器就清空上一次的定时器
            if (timer) clearTimeout(timer)
          
              // 开始设定一个新的定时器，定时器结束后执行传入的函数 fn
            timer = setTimeout(() => {
                timer=null
                fnc.apply(this, args)
            }, wait)
        }
    }

// 截流：均匀间隔时间执行
function throttle1(fun,time){ 
    let t1=0 //初始时间
    return function(){ 
           let t2=new Date() //当前时间   
            if(t2-t1>time){ 
                fun.apply(this,arguments) 
                t1=t2  
            } 
        }
    }
    
    
    function throttle2(fnc, wait = 50) {
       // 通过闭包缓存一个定时器 id
       let timer:any = null
       // 将 throttle 处理结果当作函数返回
       // 触发事件回调时执行这个返回函数
       return function(...args) {
             // 如果已经设定过定时器就不做任何操作
           if (timer) return
         
             // 开始设定一个新的定时器，定时器结束后执行传入的函数 fn
           timer = setTimeout(() => {
               timer = null;
               fnc.apply(this, args)
           }, wait)
       }
   }