📢 鸿蒙专栏：想学鸿蒙的，冲
📢 C语言专栏：想学C语言的，冲
📢 VUE专栏：想学VUE的，冲这里
📢 CSS专栏：想学CSS的，冲这里
📢 Krpano专栏：想学VUE的，冲这里
🔔 上述专栏，都在不定期持续更新中！！！！！！！！！！！！！
目录
✨ 前言
防抖(debounce)
节流(throttle)
✨ 结语
✨ 前言
在前端开发中,我们经常需要绑定处理函数到一些频繁触发的事件上,如scroll、resize、input等。如果事件处理函数执行频率过高,会对页面性能产生很大影响。
防抖(debounce)
防抖的原理是:触发事件后,延迟一段时间执行处理函数,如果在延迟时间内再次触发事件,会重新开始延时。
防抖可以使用的场景:
- 输入框实时搜索Suggest
- 窗口resize时调整样式
示例代码:
function debounce(func, delay) {let timer = null;return function() {clearTimeout(timer);timer = setTimeout(() => {func(); }, delay);}
}// 输入框搜索uggest
const search = debounce(() => {// 获取输入值后请求suggest
}, 500);input.addEventListener('input', search);
防抖的一般实现步骤:
1、创建一个延迟调用方法,使用闭包保存需要执行的函数
function debounce(func, delay) {let timeout;return function() {// 保存函数执行上下文和参数,传递给延迟函数}}2、每次事件触发时,都清除之前的延时调用
function debounce(func, delay) {let timeout;return function() {clearTimeout(timeout);// 省略}}3、设置一个新的延时调用
function debounce(func, delay) {let timeout;return function() {clearTimeout(timeout);timeout = setTimeout(() => {func();}, delay);}}4、考虑附加参数并返回函数调用结果
function debounce(func, delay) {return function(...args) {clearTimeout(timeout);timeout = setTimeout(() => {return func(...args);}, delay);}}返回一个可以取消延时的函数
function debounce(func, delay) {let timeout;return function(...args) {clearTimeout(timeout);timeout = setTimeout(() => {func(...args);}, delay);return () => clearTimeout(timeout);}}这样就实现了一个功能较完整的防抖函数,在不断调用时只执行最后一次,并可以通过返回的函数取消延迟。
节流(throttle)
节流的原理是:触发事件一段时间内只执行一次处理函数。
节流可使用的场景:
- 滚动加载更多内容
- 限制按钮提交频率
示例代码:
function throttle(func, delay) {let prev = 0;return function() {let now = Date.now();if (now - prev > delay) {func();prev = now;}}
}// 滚动加载更多
window.addEventListener('scroll', throttle(() => {//请求加载更多数据
}, 500));来关于节流函数,我也给出一些更完整和详细的实现思路:
1、创建一个可以保存执行时间和方法的闭包
function throttle(func, delay) {let lastTime;return function() {// 保留函数执行上下文和参数}}2、每次事件触发,比较当前时间和上次时间
function throttle(func, delay) {let lastTime = Date.now();return function() {let now = Date.now();if (now - lastTime > delay) {// 函数处理逻辑}}}3、在时间差大于阈值时,执行函数并更新最后时间
function throttle(func, delay) {let lastTime = Date.now();return function() {let now = Date.now();if (now - lastTime > delay) {func();lastTime = now; }}}4、考虑附加参数并返回函数执行结果
function throttle(func, delay) {return function(...args) {// 时间比较逻辑return func(...args);}}5、返回取消延时的方法
function throttle(func, delay) {let timeout;// 实现逻辑 return () => clearTimeout(timeout); }这样就实现了一个具有基本功能的节流函数,它可以帮助我们限制函数执行频率,避免过快调用。
✨ 结语
防抖和节流都是优化高频率执行事件的技巧。区别在于:
- 防抖是将多次执行变为最后一次执行
- 节流是将多次执行变成每隔一段时间执行
根据需要选用合适的方式,可以有效避免页面过渡渲染,提升性能。
