前端知识速记:节流与防抖

前端知识速记:节流与防抖

什么是防抖?

防抖是一种控制事件触发频率的方法,通常用于处理用户频繁触发事件的场景。防抖的核心思想是将多个连续触发事件合并为一个事件,以减少执行次数。它在以下场景中特别有效:

  • 输入框输入事件:实时搜索、输入验证等。
  • 窗口调整大小(resize)事件:减少窗口大小变化时的处理频率。

防抖的实现

防抖的实现依赖于计时器。每次触发事件时,都会重置计时器,只有在事件停止触发一定时间后才执行该事件处理函数。

javascript 复制代码
function debounce(fn, delay) {
    let timer = null;
    return function(...args) {
        if (timer) clearTimeout(timer);
        timer = setTimeout(() => {
            fn.apply(this, args);
        }, delay);
    };
}

// 使用示例
const input = document.getElementById('input');
input.addEventListener('input', debounce(() => {
    console.log('用户输入:', input.value);
}, 300));

在这个例子中,输入事件会在用户停止输入后 300 毫秒触发,避免了频繁的输出。

什么是节流?

节流与防抖的目标相似,但其实现方式有所不同。节流是指限制事件的触发频率,保证在一定时间内事件只会执行一次。节流特别适合以下场景:

  • 滚动监听:限制滚动事件的处理,避免性能瓶颈。
  • 定时器定时执行任务:实现定期执行的功能。

节流的实现

节流可以通过时间戳或定时器实现。这里展示使用时间戳进行节流的示例:

javascript 复制代码
function throttle(fn, limit) {
    let lastTime = 0;
    return function(...args) {
        const now = Date.now();
        if (now - lastTime >= limit) {
            lastTime = now;
            fn.apply(this, args);
        }
    };
}

// 使用示例
window.addEventListener('scroll', throttle(() => {
    console.log('用户在滚动');
}, 500));

在这个例子中,用户滚动事件的处理函数每 500 毫秒最多触发一次,以减少计算量和提高性能。

节流与防抖的区别

  • 触发时机:防抖在事件触发后的一段时间内若再次触发则会重新计时,保证事件只执行一次;而节流是保证在一定时间内只执行一次,无论事件触发了多少次。
  • 适用场景:防抖适用于用户输入等需要等待用户停止操作的场景;节流适用于需要在一定时间内持续操作的场景,例如滚动或窗口缩放。
相关推荐
浊浪载清辉16 分钟前
《Html泛型魔法学院:用霍格沃茨风格网页教授集合框架》
前端·javascript·学习·html
Want59518 分钟前
HTML元素周期表
前端·html
一只一只妖3 小时前
突发奇想,还未实践,在Vben5的Antd模式下,将表单从「JS 配置化」改写成「模板可视化」形式(豆包版)
前端·javascript·vue.js
悟能不能悟6 小时前
js闭包问题
开发语言·前端·javascript
秋秋_瑶瑶6 小时前
vue-amap组件呈现的效果图如何截图
前端·javascript·vue-amap
gnip7 小时前
js上下文
前端·javascript
中草药z7 小时前
【Stream API】高效简化集合处理
java·前端·javascript·stream·parallelstream·并行流
不知名raver(学python版)8 小时前
npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR!
前端·npm·node.js
醉方休8 小时前
React中使用DDD(领域驱动设计)
前端·react.js·前端框架