JavaScript防抖与节流：原理、实现与应用场景解析

作者：性能诊所时间：2026-10-24 22:20:17浏览：618

本文深入解析JavaScript中防抖（Debounce）与节流（Throttle）的核心原理及实现方式。通过表单搜索和鼠标移动坐标获取等实际案例，展示如何优化高频事件触发的性能问题。详细对比两者在触发机制、执行频率及应用场景上的差异，帮助开发者根据具体需求选择合适的策略，提升Web应用响应速度与服务器负载效率。

一、为什么需要防抖与节流

防抖和节流技术主要旨在解决因短时间内高频触发函数或事件而引发的性能瓶颈问题。

在用户体验层面，过高的触发频率会导致响应滞后，出现延迟、假死或界面卡顿等现象。

在服务器端，高频请求会显著增加服务器负载压力。

二、防抖（Debounce）

防抖机制是指当事件或函数被触发后，延迟指定时间（n秒）再执行回调；若在延迟期间内事件再次被触发，则重置计时器，直至n秒内无新触发才执行回调。

图文解释：

一、为什么需要防抖与节流

（回城的时间就相当于延迟时间，如果在回城的时间内再次触发回城则重新倒计时回城时间）

案例：表单输入框事件

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    <input type="text" class="serach">
    <script>
        let serach = document.getElementsByClassName('serach')[0]
            // console.log(serach);
        serach.addEventListener('input', function() {
            console.log('向后端发起了请求！');
        })
    </script>
</body>
 
</html>

运行：

一、为什么需要防抖与节流

观察运行结果可知，每次输入字符都会立即发起请求，这不仅不符合项目规范，还极大消耗服务器性能。优化策略应为：在用户输入内容后等待一段时间，若期间用户不再输入，则发起请求；若用户继续输入，则重置等待时间，直到用户停止输入并度过等待期后再发起请求。

使用防抖优化：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    <input type="text" class="serach">
    <script>
        let serach = document.getElementsByClassName('serach')[0]
            // console.log(serach);
        let timer = null; //声明一个用于防抖的定时器变量timer
        serach.addEventListener('input', function() {
            clearTimeout(timer) //如果在定时器的时间间隔内再次触发事件则清除定时器，重新执行新的定时器函数
                // 定时器函数
            timer = setTimeout(function() {
                console.log('向后端发起了请求！');
            }, 500)
 
        })
    </script>
</body>
 
</html>

运行：

一、为什么需要防抖与节流

如果在500毫秒内调用多次，只会执行最后一次

可以看出在输入完内容后的500毫秒后才发起请求

防抖的应用场景：

1.用户在输入框连续输入一串字符时，可以通过放抖策略，只在输入完后，才执行查询的请求，这样可以有效减少请求次数，节约请求资源。（也可以用节流）

2.登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖

3.调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖

4.文本编辑器实时保存，当无任何更改操作一秒后进行保存

三、节流（Throttle）

控制事件发生的频率从而达到减少一段时间内事件的触发频率，如控制为1s发生一次，甚至1分钟发生一次。

图文解释：

一、为什么需要防抖与节流

（当玩射击游戏时，无论你手点的有多快射出的弹还是有规律的发出（比如0.5发出一个弹））

案例：获取鼠标的最终坐标

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .app {
            width: 800px;
            height: 800px;
            background-color: pink;
        }
    </style>
</head>
 
<body>
    <div class="app">
    </div>
    <script>
        let app = document.getElementsByClassName('app')[0]
        app.addEventListener('mousemove', function(e) {
            console.log(`x坐标${e.pageX},y坐标${e.pageY}`);
        })
    </script>
</body>
 
</html>

运行：

一、为什么需要防抖与节流

可以看出每次鼠标移动都执行函数，大大消耗性能，我们可以利用节流策略，一秒内只执行一次来节流

节流优化：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .app {
            width: 800px;
            height: 800px;
            background-color: pink;
        }
    </style>
</head>
 
<body>
    <div class="app">
    </div>
    <script>
        let app = document.getElementsByClassName('app')[0]
        let timer = true; //定义一个节流阀变量来控制节流阀为关闭还是开启状态，默认为开启
        app.addEventListener('mousemove', function(e) {
            if (!timer) {
                return //判断节流阀是否关闭，如果节流阀还是false（关闭状态），则证明上次的函数未执行完，直接退出函数
            }
            timer = false; //设置节流阀为false，如果定时器函数没有设置为true，则定时器函数没执行，节流阀一直为关(false)
            setTimeout(function() {
                console.log(`x坐标${e.pageX},y坐标${e.pageY}`)
                timer = true //定时器函数已经执行，设置节流阀为true
            }, 500)
 
        })
    </script>
</body>
 
</html>

运行效果：

一、为什么需要防抖与节流