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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

相关阅读:
探索Franka机器人 | ROS基础培训
【MySQL进阶简写】
owl的使用
通用的异常处理程序机制与处理返回值方案
项目管理的优秀软件推荐，助力提升团队效能！
Eavesdropping（窃听机制）在机器学习中的用法
dewarp:数据变换
【LeetCode每日一题】——38.外观数列
[AUTOSAR][诊断管理][ECU][$22] 读取相关的数据
多数据中心多活相关知识

原文地址：https://blog.csdn.net/qq_43137699/article/details/126984800