一篇让你理解JavaScript防抖与节流

小白学前端666

已于 2024-09-19 19:21:11 修改

阅读量510

点赞数 18

文章标签： javascript 开发语言前端

于 2024-09-19 19:19:40 首次发布

本文链接：https://blog.csdn.net/sasa66697/article/details/142367491

版权

前言

你有没有遇到过这样的情况：页面中有个按钮，你一着急，就不小心狂点了好几下，结果提交了好几次表单，或者在输入框中每打一个字，搜索框就一直发请求，整个页面都卡顿了。这就是防抖和节流要解决的问题！

一句话解释防抖与节流：别让你的按钮“太累”了！

防抖和节流是前端开发中非常常用的性能优化技术，特别是在处理那些高频率触发的事件时。让我们用通俗的语言解释一下这两个概念，并结合下图来看看它们的实际应用吧。

图例

1. 防抖（Debounce）：我只执行最后一次

什么是防抖？

场景：假设你在输入框里输入文字，通常我们希望你停止输入后再发送请求，而不是你每敲一个字就发一次请求。这时候，防抖就派上用场了。
原理：防抖就是等你输入完成后，才执行一次。如果你在规定时间内再次输入，就会重新计时，直到你“冷静下来”，停止输入，函数才执行。

在上图中，“函数防抖”的部分显示了即使多次触发输入事件，只有在最后一次停止后，函数才被执行。

抽象解释：
想象你是在打字，但是你旁边有个同事特别焦急，一直催着你：“打完了吗？打完了吗？” 如果你每敲一个字他就要你立刻发出去，这就是没用防抖。如果用了防抖，就是你告诉他：“别急，等我完全打完再发！”。

代码示例：

// 防抖函数
function debounce(fn, delay) {
    let timer;
    return function() {
        const context = this;
        const args = arguments;
        clearTimeout(timer); // 每次输入时清除之前的定时器
        timer = setTimeout(() => fn.apply(context, args), delay); // 开启新的定时器
    };
}

// 应用在输入框的防抖搜索
const searchInput = document.getElementById('search');
searchInput.addEventListener('input', debounce(() => {
    console.log('发送搜索请求');
}, 500));  // 等用户输入停止后500ms再发请求

总结：防抖就是在多次触发后只执行最后一次。它很适合用在搜索框输入、表单验证、按钮点击等场景中，避免短时间内多次执行同一操作。

2. 节流（Throttle）：我只执行一次，等会儿再说

什么是节流？

场景：当你滚动页面或者拖拽某个元素时，如果每一次滚动或者拖拽都触发操作，页面性能就会严重下降。这时，节流就可以帮你“减负”了。
原理：节流就是规定一个时间段，比如1秒内只执行一次函数。即使你狂点、狂拖，函数也只会在指定时间内执行一次，节省性能。

在上图中，“函数节流”的部分显示了即使事件被高频率触发，函数也是按照固定间隔的时间执行，不会频繁触发。

抽象解释：
想象你正在做运动，但教练要求你每1分钟做一个俯卧撑，而不是一分钟内做一百个。这样你可以按部就班，不用过于“劳累”。

代码示例：

// 节流函数
function throttle(fn, interval) {
    let lastTime = 0; // 记录上一次执行的时间
    return function() {
        const now = Date.now();
        const context = this;
        const args = arguments;
        if (now - lastTime >= interval) {
            fn.apply(context, args); // 只在规定时间间隔后执行
            lastTime = now;
        }
    };
}

// 应用在滚动事件的节流
window.addEventListener('scroll', throttle(() => {
    console.log('页面正在滚动...');
}, 1000));  // 每1秒执行一次，不管你怎么疯狂滚动

总结：节流适合那些持续高频率的操作，比如页面滚动、按钮频繁点击、窗口大小调整等。它确保在一段时间内只执行一次操作，降低了浏览器的压力。

3. 防抖 vs 节流：你该用哪个？

防抖：适用于短时间内高频率触发，最后只想执行一次的场景。比如搜索框输入、表单验证，等用户停下来时再执行。
节流：适用于短时间内高频率触发，但你希望函数按固定频率执行的场景。比如页面滚动、按钮点击，确保操作不会执行过多次。

概念	防抖	节流
场景	输入框搜索、按钮点击	页面滚动、元素拖拽
行为	停止操作后执行	固定时间内执行一次
优势	避免短时间内重复执行	减少操作次数，提高性能