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

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>

你可能感兴趣的:(#,前端性能优化,javascript,前端,html5)