js 防抖

最新推荐文章于 2024-09-21 16:58:31 发布

原创最新推荐文章于 2024-09-21 16:58:31 发布 · 159 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

前端必会专栏收录该内容

5 篇文章

订阅专栏

防抖（debounce）是一种优化策略，用于限制函数的执行频率。在用户连续操作如输入时，只有在用户停止操作一段时间后，函数才会执行。例如，防止频繁检查邮箱格式。核心代码利用闭包保持定时器标识，避免恶意点击导致的重复执行。实际应用中，防抖常用于输入验证、窗口resize事件等场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是防抖（debounce）

定义：当调用动作触发一段事件后，才会执行该动作，若在这段时间间隔内又调用此动作则将重新计算时间间隔

举一个例子：例如在注册账号时，肯定不能用户每输入一个字符就检查邮箱是否正确，我们应该是等待用户停止输入，比如过了500ms用户都没有再输入，那么就检查此时的邮箱地址格式是否正确，这就是防抖

代码展示

function debounce(fn,delay) {
    let id;
    return function() {
        clearTimeout(id);
        id = setTimeout(()=>{
            fn()
        }, delay);
    }
};

这是核心代码：其中这里运用到了闭包，主要目的是把 id 变成一个静态变量，不会随着函数的结束而消失，反而当我们执行代码的时候，它会记住上一次 setTimeout 的编号，如果用户恶意的点击按钮就会清除掉这个编号，反之，执行该按钮对应的代码。

实例：

<html>
	<head>
		
	</head>
	<body>
		<input id='n' type='button' value='点一下'>
	<script>
        function debounce(fn,delay) {
            let id;
            return function() {
                clearTimeout(id);
                id = setTimeout(()=>{
                    fn()
                }, delay);
            }
        };
        function handle(){
            console.log(1);
        };
        document.getElementById('n').onclick = debounce(handle,1000);
	</script>
	</body>
</html>