防抖（Debounce）和节流（Throttle）

Niucode

已于 2024-05-02 17:01:51 修改

阅读量262

点赞数 5

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

于 2024-03-30 14:15:24 首次发布

本文链接：https://blog.csdn.net/Niucode/article/details/137159637

版权

js 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

防抖（Debounce）和节流（Throttle）是常用的优化技术，用于控制事件触发的频率。以下是它们的示例：

1. 防抖（Debounce）：防抖的目标是在触发事件后等待一段时间，如果在这段时间内没有再次触发该事件，才执行相应的操作。如果在等待时间内又触发了该事件，则重新开始等待计时。

<body>
    <input type="text" placeholder="请输入关键字">
    <script>
        function debounce(func, delay) {
            let timer;

            return function () {
                clearTimeout(timer);

                timer = setTimeout(() => {
                    console.log('打印this的值', this); // 这里打印的是input这个dom
                    func.apply(this, arguments);
                }, delay);
            };
        }

        // 示例：在输入框中输入文字时触发防抖函数
        const input = document.querySelector('input');

        function handleInput() {
            console.log('Input value:', input.value);
        }

        const debouncedInput = debounce(handleInput, 300);

        input.addEventListener('input', debouncedInput);
    </script>
</body>

在上面的示例中，当用户在输入框中输入文字时，防抖函数会延迟300毫秒执行handleInput()函数，只有在连续输入停止300毫秒后，才会输出输入框的值。

2. 节流（Throttle）：节流的目标是控制事件的触发频率，在一定的时间间隔内只触发一次事件。如果在这个时间间隔内多次触发该事件，只有第一次触发会执行相应的操作，后续的触发将被忽略。

        function throttle(func, delay) {
            let timer;
            let lastExecutedTime = 0;

            return function () {
                const currentTimestamp = Date.now();

                if (currentTimestamp - lastExecutedTime >= delay) {
                    func.apply(this, arguments);
                    lastExecutedTime = currentTimestamp;
                } else {
                    clearTimeout(timer);

                    timer = setTimeout(() => {
                        func.apply(this, arguments);
                        lastExecutedTime = currentTimestamp;
                    }, delay);
                }
            };
        }

        // 示例：滚动事件时触发节流函数
        function handleScroll() {
            console.log('Scroll position:', window.scrollY);
        }

        const throttledScroll = throttle(handleScroll, 300);

        window.addEventListener('scroll', throttledScroll);

在上面的示例中，当用户滚动页面时，节流函数会在每300毫秒内只触发一次handleScroll()函数，输出当前滚动位置。如果在300毫秒内多次触发滚动事件，只有第一次触发会执行相应的操作，后续的触发将被忽略。

这些是防抖和节流的简单示例，它们可以根据具体的需求进行调整和扩展。请注意，在实际开发中，也可以使用现成的防抖和节流库来方便地实现这些功能。