防抖与节流 - 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,然后在指定的时间间隔内,无论事件触发了多少次,都不会再次执行。

比较 🔍

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

总结

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

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

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

相关推荐
zhangjr05751 小时前
【HarmonyOS Next】鸿蒙实用装饰器一览(一)
前端·harmonyos·arkts
不爱学习的YY酱1 小时前
【操作系统不挂科】<CPU调度(13)>选择题(带答案与解析)
java·linux·前端·算法·操作系统
木子七2 小时前
vue2-vuex
前端·vue
麻辣_水煮鱼2 小时前
vue数据变化但页面不变
前端·javascript·vue.js
BY—-组态2 小时前
web组态软件
前端·物联网·工业互联网·web组态·组态
一条晒干的咸魚2 小时前
【Web前端】实现基于 Promise 的 API:alarm API
开发语言·前端·javascript·api·promise
我明天再来学Web渗透2 小时前
【SQL50】day 2
开发语言·数据结构·leetcode·面试
WilliamLuo3 小时前
MP4结构初识-第一篇
前端·javascript·音视频开发
Beekeeper&&P...3 小时前
web钩子什么意思
前端·网络
啵咿傲3 小时前
重绘&重排、CSS树&DOM树&渲染树、动画加速 ✅
前端·css