1 函数防抖

定义：函数防抖：时间n秒后触发，不管在这个时间段中执行多少次事件，该事件只针对最后一次触发
使用场景：上拉刷新  scroll事件 resize事件 文本的输入验证

1-抖动

<button id="btn">函数防抖</button>
    <script>
        var btn = document.getElementById("btn");
        btn.onclick = function(){
              setTimeout(()=>{
                console.log("loading");
                timer = null;
            },500)
        }
    </script>

2-原生javascript-button实现防抖

<!-- 函数防抖：时间n秒后触发，不管在这个时间段中执行多少次时间，该事件只针对最后一次触发 -->
    <button id="btn">函数防抖</button>
    <script>
        var timer;
        var btn = document.getElementById("btn");
        btn.onclick = function(){
            if(timer){
                clearTimeout(timer)
            }
           timer =  setTimeout(()=>{
                console.log("loading");
                timer = null;
            },500)
        }
    </script>

input实现防抖

##input
<input type="text" id="input">
    <script>
        var timer;
        var input = document.getElementById("input");
        input.addEventListener("keyup",()=>{
            if(timer){
                clearTimeout(timer)
            }
           timer =  setTimeout(()=>{
                console.log(input.value);
                timer = null;
            },500)
        })
  </script>

3-封装函数防抖（闭包）

  <input type="text" id="input">
    <script>
    //使用
        var input = document.getElementById("input");
        input.addEventListener("keyup",debounce(function(){
            console.log(this.value);
        }))
        //封装
    //
        function debounce(fn,delay=500){
            let timer = null;
            return function(){
                console.log(this);
                if(timer){
                    clearTimeout(timer);
                }
                timer = setTimeout(()=>{
                    console.log(this)
                  //改变this关键字指向
                    fn.apply(this);
                },delay);
            }
        }
    </script>