js实现防抖函数,输入框持续输入打印最终的值

Tyler Yue

于 2022-09-22 08:54:54 发布

阅读量555

点赞数

分类专栏： # 前端性能优化文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/qq_43137699/article/details/126984800

版权

前端性能优化专栏收录该内容

2 篇文章 0 订阅

订阅专栏

js实现防抖函数,输入框持续输入打印最终的值

防抖是闭包的实际应用之一

一、防抖函数：

**概念：**当高频事件持续触发时，只有当一定时间内没有再次触发事件，事件才会执行一次,

若一定时间内再次触发事件，则重新计时。

比较类似lol中回城被打断后，再次回城需要重新读秒

二、实现代码：

<body>
<input type="text" id="input">
<script>
    // 输入框一直输入，停止输入后1秒后，才打印输出最终的值
    let debounceFunc = debounce(1000)
    let input = document.getElementById('input')
    input.addEventListener('keyup',function (e) {
        debounceFunc(e.target.value,fn)//重复调用了返回的回调函数
    })
    /**
     * 防抖函数
     * @param delay 延时时间
     * @param value 传入值
     */
    function debounce(delay) {
        let timer
        return (value,callback)=>{
            clearTimeout(timer)
            // 需要清除的timer，利用闭包将timer一直保存在内存之中
            timer = setTimeout(()=>{
                // console.log(value) // 若结果不再此处输出
                callback(value);
            },delay)
        }
    }
    //回调函数
    function fn(value) {
        console.log('callback',value)
    }
    //防抖函数实际应用：
    //1、使用echarts时，改变浏览器宽度，希望重新渲染
    //2、搜索时输入真正结束n秒后,才发送搜索请求

</script>