防抖节流的区别、实现

前言

函数防抖（debounce）和 函数节流（throttle）是干嘛用的？

答：为了优化函数触发频率过高导致响应速度跟不上触发频率出现延迟、假死或卡顿等现象。

一、防抖（debounce）

1、什么是防抖？

防抖是触发高频率事件后n秒内函数只执行一次。如果n秒后高频事件再次被触发，则重新计算。打个比方来说，喜欢打王者荣耀的伙伴都知道，没血了需要回城补血，这时候点击回城，开始进度条回城，如果进度条正在跑不小心又点到回城，回城又开始重新算。

2、防抖实现

思路：

1. 触发高频率函数，定义一个定时器来延迟触发
2. 重新触发时，如果定时器存在则清除重置定时器

代码实现：

     //获取元素
        var input = document.getElementById('input')
    //防抖
        //触发事件
        function handle(e){
            console.log(e.target.value);
        }
        function debounce(fn){
            var timer
            return function(){
                if(timer){
                    clearTimeout(timer)
                }
                timer = setTimeout(()=>{
                    //arguments就是传入的参数数组,而且个数可以不确定的传回给fn
                    fn.apply(this,arguments)
                },1000)
            }
        }
        input.addEventListener('input',debounce(handle))

二、节流（throttle）

1、什么是节流？

节流是高频事件触发，但在n秒内只执行一次。节流会稀释函数的执行频率。就像水滴，固定时间2秒滴一滴水，那么就会2秒滴一滴，4秒...6秒...

2、节流实现

思路：

1. 设置一个变量，当作开关，true的话才能进入函数，进入后变成false
2. 通过定时器在规定时间后才能进入执行函数触发

代码实现：

      //获取元素
        var input = document.getElementById('input')
    //节流
        function handle(e){
            console.log(e.target.value);
        }
        function throttle(fn){
            //定义一个状态
            let flag = true
            return function(){
                if(!flag) return 
                flag = false;
                fn.apply(this,arguments)
                setTimeout(()=>{
                    flag=true
                },1000)
            }
        }
        input.addEventListener('input',throttle(handle))

三、总结（结合上述代码）

防抖：在规定时间内触发会重置，如果用户在input框一直输入的话，函数就一直不会执行

节流：规定时间内只触发一次，input框输入值后立马执行，然后无论input值怎么改变不会触发，直到规定时间过后再次触发...