十五、函数防抖

定义：事件在n秒后触发，不管在这个时间节点中执行多少次事件，只触发最后一次事件
对比场景：游戏中的回城 DNF中的抬枪

使用场景：

上拉刷新、下拉加载--scroll事件
resize
文本的输入验证(连续输入文字后发送Ajax请求进行验证)
请求验证码

1、原生JavaScript-button实现防抖

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

2、input实现防抖

<input type="text" id="input">
    <script>
        var input = document.getElementById("input")
        // 抖动的代码
        /* input.addEventListener("keyup",()=>{
            setTimeout(()=>{
                console.log(input.value);
            },1000)
        }) */
        input.addEventListener("keyup",()=>{
            console.log(timer);
            if(timer){
                clearTimeout(timer)
            }
            timer = setTimeout(()=>{
                console.log(input.value);
                timer = null//可加可不加
            },1000)
        }) 
    </script>

3、封装防抖

<input type="text" id="input">
    <script>
        var input = document.getElementById("input")
        input.addEventListener("keyup",()=>{
            debounce(()=>console.log(input.value))
        })
        // 封装一个防抖函数
        function debounce(fn,delay=500){
            let timer
            if(timer){
                clearTimeout(timer)
            }
            timer = setTimeout(()=>{
                fn()
            },delay)
        }
    </script>

4、闭包封装的防抖

<input type="text" id="input">
<script>
  var input = document.getElementById("input")
  input.addEventListener("keyup",debounce(()=>{
    console.log(input.value);
  }))
  // 封装一个防抖函数
  // 闭包：1、返回值是一个函数；2、返回函数使用返回函数外面定义的局部变量
  // 闭包的好处，不会造成全局的污染
function debounce(fn,delay=500){
  let timer
  return function(){
    if(timer){
      clearTimeout(timer)
    }
    timer = setTimeout(()=>{
      fn()
    },delay)
  }
}
</script>

5、apply改变this指向问题的封装防抖

<input type="text" id="input">
    <script>
        var input = document.getElementById("input")
        input.addEventListener("keyup",debounce(function(){
            console.log(this.value);
        }))
        // 封装一个防抖函数
        // 闭包：1、返回值是一个函数；2、返回函数使用返回函数外面定义的局部变量
        // 闭包的好处，不会造成全局的污染
        function debounce(fn,delay=500){
            let timer
            return function(){
                console.log(this);
                if(timer){
                    clearTimeout(timer)
                }
                timer = setTimeout(()=>{
                    console.log(this);
                    fn.apply(this)
                },delay)
            }
        }
        // function才能用call，apply
    </script>