前端防抖与节流技术解析-优快云博客

本文链接：https://blog.youkuaiyun.com/waterwo/article/details/124035409

本文详细介绍了前端开发中的防抖(debounce)和节流(throttle)技术，包括它们的概念、应用场景以及不同实现方式。防抖常用于输入框搜索、按钮点击等场景，而节流则适用于页面滚动、鼠标移动等频繁触发的事件。文中提供了非立即执行版、立即执行版以及双剑合璧版的防抖和节流函数实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、防抖（debounce）

所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

防抖的应用场景很多：
1.输入框中频繁的输入内容，搜索或者提交信息；
2.频繁的点击按钮，触发某个事件；
3.监听浏览器滚动事件，完成某些特定操作；
4.用户缩放浏览器的resize事件；
总之，密集的事件触发，我们只希望触发比较靠后发生的事件，就可以使用防抖函数；

防抖函数分为非立即执行版和立即执行版。

非立即执行版：

function debounce(func, wait) {
   
    let timeout;
    return function () {
   
        let context = this;
        let args = arguments;

        if (timeout) clearTimeout(timeout);
        
        timeout = setTimeout(() => {
   
            func.apply(context, args)
        }, wait);
    }
}

非立即执行版的意思是触发事件后函数不会立即执行，而是在 n 秒后执行，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

立即执行版：

function debounce(func,wait) {
   
    let timeout;
    return function () {
   
        let context = this;
        let args = arguments;

        if (timeout) clearTimeout(timeout