当前位置：首页 > news >正文

提升网页交互体验的秘密武器——防抖和节流

news 2025/7/8 18:55:13

说在前面

在现代Web开发中，提高网页性能是至关重要的。本文介绍了防抖和节流这两种常用的性能优化技术，通过控制函数的执行频率，有效减少不必要的计算和网络请求，从而提升用户体验和页面加载速度。

函数节流

节流是指限制一个函数在一定时间内只执行一次。当持续触发事件时，保证每隔一段时间只执行一次事件处理函数。举例来说，假设有一个按钮点击事件会触发某个函数，通过节流的方式，即使用户频繁点击按钮，该函数也只会在一定时间间隔内执行一次。

function throttle(func, ms = 1000) {//标记是否可以执行let canRun = true;return function (...args) {//不可执行if (!canRun) return;//执行后设置不可执行canRun = false;//设置执行周期setTimeout(() => {func.apply(this, args);//重置标记canRun = true;}, ms);}
}

测试：

const task = () => { console.log('run task') };
const throttleTask = throttle(task, 1000);
//鼠标连续点击，在设置的执行周期内只会触发一次
window.addEventListener('click', throttleTask);

应用：

滚动加载，加载更多或滚动到底部监听
搜索框，搜索联想功能
高频点击提交，表单重复提交

函数防抖

防抖是指在事件被触发指定时间后，才执行事件处理函数。如果在这个指定时间内又有相同事件被触发，则这个计时就会被重新开始。举例来说，假设有一个输入框用于搜索，用户在输入过程中会触发搜索事件，通过防抖的方式可以确保用户停止输入一段时间后才执行实际的搜索操作，避免频繁触发搜索请求。

function debounce(func, ms = 1000) {//定时器IDlet timer;return function (...args) {//清除定时器if (timer) {clearTimeout(timer);}//设置函数执行时间timer = setTimeout(() => {func.apply(this, args);}, ms);}
}

测试：

const task = () => { console.log('run task') };
const debounceTask = debounce(task, 1000);
//鼠标连续点击，只会触发最后一次
window.addEventListener('click', debounceTask);

应用 :

手机号、邮箱正则输入检测
搜索框输入：用户最后一次输入完，再发送请求
窗口大小：窗口调整完成后，计算窗口大小，防止重复渲染

公众号

关注公众号『前端也能这么有趣』，获取更多新鲜内容。

说在后面

🎉 这里是 JYeontu，现在是一名前端工程师，有空会刷刷算法题，平时喜欢打羽毛球 🏸 ，平时也喜欢写些东西，既为自己记录 📋，也希望可以对大家有那么一丢丢的帮助，写的不好望多多谅解 🙇，写错的地方望指出，定会认真改进 😊，偶尔也会在自己的公众号『前端也能这么有趣』发一些比较有趣的文章，有兴趣的也可以关注下。在此谢谢大家的支持，我们下文再见 🙌。