防抖与节流 - 2024最新版前端秋招面试短期突击面试题【100道】

防抖与节流 - 2024最新版前端秋招面试短期突击面试题【100道】 ⏲️

在JavaScript中,防抖(Debouncing)与节流(Throttling)是两种常用的性能优化技术,尤其在处理频繁触发的事件时,如滚动、窗口调整大小或键盘输入等。理解这两者的定义和用法能帮助你在开发中写出更高效的代码。

防抖(Debouncing) 🔄

定义

防抖是一种确保某个函数在指定时间内只执行一次的技术。换句话说,当事件被触发后,只有在事件停止触发一段时间后,才会执行指定的函数。

使用场景

适用于那些需要在用户停止某种操作后才执行的场景,比如搜索框输入、按钮点击等。

示例代码

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

// 使用
window.addEventListener('resize', debounce(function() {
    console.log('Resized!');
}, 250));

在上面的示例中,debounce函数返回了一个新的函数,这个新函数会延迟执行原函数func,如果在等待时间内再次触发,则会重新开始计时。

节流(Throttling) ⏳

定义

节流技术确保函数以固定的频率执行,不管事件触发了多少次,在指定的时间间隔内只会执行一次。

使用场景

适用于那些需要以固定频率执行的场景,例如滚动事件处理、窗口大小调整等。

示例代码

javascript 复制代码
function throttle(func, limit) {
    let inThrottle;
    return function() {
        const args = arguments;
        const context = this;
        if (!inThrottle) {
            func.apply(context, args);
            inThrottle = true;
            setTimeout(() => inThrottle = false, limit);
        }
    };
}

// 使用
window.addEventListener('scroll', throttle(function() {
    console.log('Scrolled!');
}, 100));

在上面的示例中,throttle函数返回了一个新的函数,这个新函数会立即执行原函数func,然后在指定的时间间隔内,无论事件触发了多少次,都不会再次执行。

比较 🔍

  • 防抖:适合连续操作结束后只执行一次的情况,如搜索框输入。在用户输入停止后,等待指定时间再执行。
  • 节流:适合需要持续以固定频率执行的情况,如滚动事件。函数在每个固定的时间间隔内执行一次,不管事件触发的频率有多高。

总结

两者的目的都是减少函数的执行次数,但它们的行为不同:

  • 防抖是在一段时间后才执行。
  • 节流是按照固定的时间间隔执行。

根据具体的使用场景,选择合适的优化策略可以显著提高应用的性能和用户体验。理解并应用这些技术将帮助你在面试中展示你的前端开发能力,祝你顺利上岸!

相关推荐
~甲壳虫8 分钟前
react中得类组件和函数组件有啥区别,怎么理解这两个函数
前端·react.js·前端框架
.net开发24 分钟前
WPF使用Prism框架首页界面
前端·c#·.net·wpf
名字越长技术越强43 分钟前
vue--vueCLI
前端·javascript·vue.js
是个热心市民1 小时前
构建一个导航栏web
前端·javascript·python·django·html
J不A秃V头A1 小时前
报错:npm : 无法加载文件 C:\Program Files\nodejs\npm.ps1,因为在此系统上禁止运行脚本。
前端·npm·node.js
GDAL1 小时前
npm入门教程14:npm依赖管理
前端·npm·node.js
余生H1 小时前
即时可玩web小游戏(二):打砖块(支持移动端版) - 集成InsCode快来阅读并即时体验吧~
前端·javascript·inscode·canvas·h5游戏
5335ld1 小时前
vue+exceljs前端下载、导出xlsx文件
前端·vue.js
摇头的金丝猴2 小时前
uniapp vue3 使用echarts-gl 绘画3d图表
前端·uni-app·echarts
清清ww2 小时前
【TS】九天学会TS语法---计划篇
前端·typescript