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

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

防抖(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

相关推荐
两个西柚呀3 小时前
未在props中声明的属性
前端·javascript·vue.js
子伟-H56 小时前
App开发框架调研对比
前端
桃子不吃李子6 小时前
axios的二次封装
前端·学习·axios
SteveJrong6 小时前
面试题 - JavaScript
前端·javascript·面试·ecmascript·基础·找工作·红宝书
阿金要当大魔王~~6 小时前
uniapp 页面标签 传值 ————— uniapp 定义 接口
前端·javascript·uni-app·1024程序员节
全栈软件开发7 小时前
uniapp三端影视源码苹果cms自动采集电影视频网站源码前端源码带VIP
前端·uni-app·影视源码
chxii7 小时前
10.4FormData :前端文件上传与表单数据处理的核心工具
前端
AntBlack7 小时前
不当韭菜 : 好像真有点效果 ,想藏起来自己用了
前端·后端·python
楊无好7 小时前
react中props的使用
前端·react.js·前端框架
一个处女座的程序猿O(∩_∩)O7 小时前
Vue-Loader 深度解析:原理、使用与最佳实践
前端·javascript·vue.js