解锁Web性能的秘密武器：掌握防抖与节流技术

防抖和节流

在现代Web开发中，提升应用性能和用户体验是至关重要的。防抖（Debouncing）和节流（Throttling）是两种常见的技术，它们通过减少事件处理函数的执行频率来达到这一目标。尽管它们的目的相似，但它们的应用场景、优点以及实现方式各有特点。

概念

防抖：当事件被触发后，会等待一段时间再执行操作。如果在这段等待时间内事件再次被触发，则重新开始计时。
节流：在一定时间间隔内，事件处理函数只会被执行一次，无论事件在这段时间内被触发多少次。

应用场景

防抖的应用场景：

搜索框实时搜索：避免用户每输入一个字符就发送一次请求，减少服务器压力和网络资源消耗。
窗口大小调整（resize）：只在用户完成窗口大小调整后执行操作，提高响应效率。
表单验证：用户停止输入一段时间后才进行验证，提升用户体验。

节流的应用场景：

按钮防重复点击：防止用户短时间内重复提交表单或执行操作。
滚动事件监听（scroll）：限制滚动处理函数的调用频率，减少性能开销。
鼠标移动事件（mousemove）：减少事件处理函数的执行次数，避免界面卡顿。

优点

提升性能：减少不必要的计算和网络请求，降低浏览器的工作负担。
改善体验：使用户界面更加流畅，响应更加及时。
资源节约：减少服务器资源的消耗，优化带宽使用。

实现原理与代码示例

防抖（Debouncing）

原理：设置一个延时器，每次事件触发时重置此延时器。只有当事件停止触发一段时间后，延时器的回调函数才会执行。

代码示例：

html 复制代码

<body>
    <input type="text">
</body>
<script>
    let input = document.querySelector('input');
    let timer; // 存储定时器的id
    input.addEventListener('input', () => {
        // 如果定时器存在，清除定时器
        if (timer) {
            clearTimeout(timer);
        }
        // 刷新等待时间
        timer = setTimeout(() => {
            console.log('防抖');
        },1000);
    });
</script>

节流（Throttling）

原理：确保函数在指定时间间隔内最多只执行一次。如果在间隔内触发，那么只有第一次生效，直到下一个时间间隔开始。

代码示例：

html 复制代码

<body>
    <input type="text">
</body>
<script>
    let input = document.querySelector('input');
    let timer = null; // 存储定时器的id
    input.addEventListener('input', () => {
        // 判断是否还在时间间隔内，如果在，则直接返回
        if (timer != null) {
            return
        }
        timer = setTimeout(() => {
            console.log('节流');
            timer = null; // 执行结束时清除定时器，以便下次可以触发
        },1000);
    });
</script>