手写防抖和节流,以及两者之间的区别

手写防抖和节流,以及两者之间的区别

防抖(Debounce)和节流(Throttle)是两种常见的优化高频事件处理的技术。它们的主要目的是减少事件触发的频率,从而提高性能。

1. 防抖(Debounce)

防抖的核心思想是:在事件触发后,等待一段时间(例如 n 毫秒),如果在这段时间内没有再次触发事件,才执行处理函数。如果在等待时间内又触发了事件,则重新计时。

应用场景:输入框实时搜索、窗口大小调整等。

javascript 复制代码
function debounce(func, wait) {
    let timeout;
    return function(...args) {
        const context = this;
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(context, args), wait);
    };
}

// 示例用法
const input = document.querySelector('input');
input.addEventListener('input', debounce(function() {
    console.log('Input value:', input.value);
}, 300));

2. 节流(Throttle)

节流的核心思想是:在一定时间间隔内(例如 n 毫秒),只执行一次处理函数。即使在这段时间内事件被多次触发,也只会执行一次。

应用场景:滚动事件、鼠标移动事件等。

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

// 示例用法
window.addEventListener('scroll', throttle(function() {
    console.log('Scrolling...');
}, 200));

3. 防抖和节流的区别

  • 防抖:在事件触发后,等待一段时间,如果在这段时间内没有再次触发事件,才执行处理函数。如果在等待时间内又触发了事件,则重新计时。
  • 节流:在一定时间间隔内,只执行一次处理函数。即使在这段时间内事件被多次触发,也只会执行一次。

总结

  • 防抖:适合处理连续触发的事件,但只关心最后一次触发的结果(如输入框实时搜索)。
  • 节流:适合处理连续触发的事件,但希望在一定时间间隔内只执行一次(如滚动事件)。

通过合理使用防抖和节流,可以有效地优化高频事件的处理,提升用户体验和性能。

更多vue相关插件及后台管理模板可访问vue admin reference,代码详情请访问github

相关推荐
知识分享小能手2 小时前
微信小程序入门学习教程,从入门到精通,微信小程序常用API(上)——知识点详解 + 案例实战(4)
前端·javascript·学习·微信小程序·小程序·html5·微信开放平台
清灵xmf2 小时前
CSS field-sizing 让表单「活」起来
前端·css·field-sizing
文火冰糖的硅基工坊2 小时前
[光学原理与应用-480]:《国产检测设备对比表》
前端·人工智能·系统架构·制造·半导体·产业链
excel2 小时前
Qiankun 子应用生命周期及使用场景解析
前端
weixin_446260852 小时前
Django - 让开发变得简单高效的Web框架
前端·数据库·django
蓝莓味的口香糖2 小时前
【JS】什么是单例模式
开发语言·javascript·单例模式
ObjectX前端实验室3 小时前
【react18原理探究实践】异步可中断 & 时间分片
前端·react.js
SoaringHeart3 小时前
Flutter进阶:自定义一个 json 转 model 工具
前端·flutter·dart
努力打怪升级4 小时前
Rocky Linux 8 远程管理配置指南(宿主机 VNC + KVM 虚拟机 VNC)
前端·chrome
brzhang4 小时前
AI Agent 干不好活,不是它笨,告诉你一个残忍的现实,是你给他的工具太难用了
前端·后端·架构