防抖函数--2021前端面试知识点整理5

防抖函数

• 当持续触发事件（键盘一直输入内容）， 一定时间内没有在触发事件 （键盘抬起并且满足在1s内键盘没有再输入），事件处理函数才会执行一次（定时器）
• 如果设定的时间到来之前 又一次触发了事件 就重新开始延时（重新开始定时器——将上一次还没结束的定时器清除掉，重新开始）

持续输出

<input type="text" id = "input">
<script>
    var input = document.getElementById('input')
    //防抖函数
    function debounce(delay, value) {
        setTimeout(function () {
            console.log(value)
        },delay)
    }
    input.addEventListener('keyup', function (e) {
        debounce(1000, e.target.value)
    }) //输一次出现一次
</script>

没有变化

<input type="text" id = "input">
<script>
var input = document.getElementById('input')
    //防抖函数
    function debounce(delay, value) {
        let timer
        clearTimeout(tiemr)
        //我们想要清除setTimeout 我们应该存储这个timer的变量
        // timer变量需要一直保存在内存当中
        // 不想打印之前已经输入的结果 清除以前触发的定时器
        //我们应该存储这个timer的变量
        //一直在内存当中->内存的泄露->闭包
        timer = setTimeout(function () {
            console.log(value)
        },delay)
    }
</script>

采用闭包

<input type="text" id = "input">
<script>
var input = document.getElementById('input')
    //防抖函数
    function debounce(delay) {
        let timer
        return function (value) {
            clearTimeout(timer)
            //我们想要清除setTimeout 我们应该存储这个timer的变量
            // timer变量需要一直保存在内存当中
            // 不想打印之前已经输入的结果 清除以前触发的定时器
            //我们应该存储这个timer的变量
            //一直在内存当中->内存的泄露->闭包
            timer = setTimeout(function () {
                console.log(value)
            },delay)
        }
    }
    // 目标：在自己键盘抬起不再输入后一秒之后 输入框的结果只打印一次
    var debounceFunc = debounce(1000)
    input.addEventListener('keyup', function (e) {
        debounceFunc(e.target.value)
    })
//函数里面return出函数
</script>

结果外面输出

<input type="text" id = "input">
<script>
var input = document.getElementById('input')
    //防抖函数
    function debounce(delay,callback) {
        let timer
        return function (value) {
            clearTimeout(timer)
            //我们想要清除setTimeout 我们应该存储这个timer的变量
            // timer变量需要一直保存在内存当中
            // 不想打印之前已经输入的结果 清除以前触发的定时器
            //我们应该存储这个timer的变量
            //一直在内存当中->内存的泄露->闭包
            timer = setTimeout(function () {
                //console.log(value) //输出结果 想让这个结果不再这里输出 而在外面输出
                callback(value)
            },delay)
        }
    }
    // 目标：在自己键盘抬起不再输入后一秒之后 输入框的结果只打印一次
    function fn (value){
    	console.log(value)
    }
    var debounceFunc = debounce(1000)
    input.addEventListener('keyup', function (e) {
        debounceFunc(e.target.value)
    })
//函数里面return出函数
</script>

防抖函数实际应用

• 使用echart时，改变浏览器宽度 希望重新渲染
• echarts的图像 可以使用此函数 提升性能（虽然echarts里自带resize函数）
• 典型案例：输入搜索
• 输入结束后n秒才进行搜索请求，n秒内又输入的内容 就重新计时，解决搜索的bug