防抖和节流

＆白帝＆

已于 2024-09-23 09:33:03 修改

阅读量383

点赞数 7

分类专栏：前端面试文章标签： vue.js javascript 前端

于 2024-09-23 00:01:56 首次发布

本文链接：https://blog.csdn.net/qq_48763502/article/details/142418396

版权

前端面试专栏收录该内容

29 篇文章 0 订阅

订阅专栏

防抖（Debounce）和节流（Throttle）是两种常见的优化技术，主要用于控制函数执行频率，特别是在处理高频事件（如滚动、输入等）时。它们的具体含义和使用场景如下：

一防抖（Debounce）

概念：防抖是指在一定时间内多次触发事件时，只执行最后一次事件。换句话说，只有在事件停止触发后，才会执行指定的函数。

1 使用场景：

搜索框输入建议：用户输入时，只有在停止输入一段时间后才发起搜索请求。
窗口调整大小：在窗口大小调整停止后，再执行相应的处理。

示例代码：

function debounce(func, delay) {
    let timer;
    return function(...args) {
        clearTimeout(timer);
        timer = setTimeout(() => {
            func.apply(this, args);
        }, delay);
    };
}

// 使用示例
const handleResize = debounce(() => {
    console.log('窗口调整大小');
}, 200);

window.addEventListener('resize', handleResize);

2 输入框实时搜索

假设我们有一个搜索输入框，我们希望在用户停止输入后再进行搜索请求。

<input type="text" id="search" placeholder="搜索..." />

<script>
function debounce(func, delay) {
    let timer;
    return function(...args) {
        clearTimeout(timer);
        timer = setTimeout(() => {
            func.apply(this, args);
        }, delay);
    };
}

function performSearch(query) {
    console.log('Searching for:', query);
    // 这里可以发起实际的搜索请求
}

const input = document.getElementById('search');
input.addEventListener('input', debounce((event) => {
    performSearch(event.target.value);
}, 300));
</script>

二节流（Throttle）

概念：节流是指在一定时间内，只允许一次事件触发。无论事件触发的频率有多高，都会按固定时间间隔执行函数。

1 使用场景：

滚动监听：在用户滚动页面时，限制某个操作的执行频率。
按钮点击：防止用户快速多次点击按钮。

示例代码：

function throttle(func, delay) {
    let lastTime = 0;
    return function(...args) {
        const now = Date.now();
        if (now - lastTime >= delay) {
            lastTime = now;
            func.apply(this, args);
        }
    };
}

// 使用示例
const handleScroll = throttle(() => {
    console.log('页面滚动');
}, 200);

window.addEventListener('scroll', handleScroll);

2 按钮点击

     // 1.封装节流函数
        function throttle(fn, delay) {
            //3. 通过闭包保存一个 "节流阀" 默认为false
            let flag= false;
            return function () {
                //8.触发事件被调用 判断"节流阀" 是否为true  如果为true就直接trurn出去不做任何操作
                if (flag) {
                    return;
                } else {
                    //4. 如果节流阀为false  立即将节流阀设置为true
                    flag= true; //节流阀设置为true
                    //5.  开启定时器
                    setTimeout(() => {
                        //6. 将外部传入的函数的执行放在setTimeout中
                        fn.apply(this, arguments);
                        //7. 最后在setTimeout执行完毕后再把标记'节流阀'为false(关键)  表示可以执行下一次循环了。当定时器没有执行的时候标记永远是true，在开头被return掉
                        flag= false;
                    }, delay);
                }
            };
        }
        function handleClick() {
            // 打印当前 document 的宽高
          console.log("按钮被点击了");
        }
        
    const throttledClickHandler = throttle(handleClick, 300);

    // 模拟按钮点击
    setInterval(throttledClickHandler, 100); // 每100毫秒模拟一次点击