前端防抖总结

防抖

1.简介

    场景：用户在一段时间频繁点击执行某个函数/事件，那么在这段时间，用户点击一次，计时器重新计时，当在这段时间内用户没有触发该函数/事件时，该函数/事件会在这段时间结束时执行，只执行最后一次。
    应用示例理解：回城被打断，玩家残血准备回城，需要3s回城成功，但是在这个3s的过程中，玩家又重新点击了回城，导致3s回城重新计算，再等3s。

2.应用场景

    登录、发短信、发送post请求等按钮/事件避免用户点击太快，以致于发送了多次请求，需要防抖，最后一次发送请求即可；
   调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖；
   input输入框获取到value值不需要输入一个字符就获取一次，可以使用防抖，让其输入结束之后再获取其值

............................

function debounce(func,delay) {
    // 定义一个定时器timer
    let timer = null
    return function() {
        const that = this
        const args = arguments
        // 防抖核心：每次触发事件计时器都会重新计时
        clearTimeout(timer)
        timer = setTimeout(()=>{
            func.apply(that,args)
        },delay)
    }
}

未调用防抖函数时：用户每在input输入/删除一个值，都会输出一个值；

    <input type="text" id="input">
 
    <script>
        let inputDom = document.getElementById('input')
        //获取输入框的输入内容
        inputDom.oninput = function(){
          console.log('this.value',this.value)
        }
    </script>

调用防抖函数后：用户在input输入/删除一个值delay之后才，会输出一个值

    let inputDom = document.getElementById('input')
    //func 是执行函数，delay 是事件执行的延迟时间，毫秒
    function debounce(func,delay) {
        // 定义一个定时器timer
        let timer = null
        return function() {
            const that = this
            const args = arguments
            // 防抖核心：每次触发事件计时器都会重新计时
            clearTimeout(timer)
            timer = setTimeout(()=>{
               func.apply(that,args)
            },delay)
        }
    }
    function handler() {
        console.log('this.value',this.value)
    }
    inputDom.addEventListener('input', debounce(handler, 1000))