终于悟了！！！防抖与节流

终于悟了！！防抖与节流

概念：

防抖（debounce）：在时间内频繁的触发，只会执行__最后一次__！

节流（throttle）：在时间内频繁的触发，只执行__一次__!

防抖（debounce）

场景：

就是指触发事件后在n秒内函数只能执行一次，如果在n秒内又触发了事件，则会重新计算函数执行时间。

举栗子：设定1000毫秒执行，当你触发事件了，他会1000毫秒后执行，但是在还剩500毫秒的时候你又触发了事件，那就会重新开始1000毫秒之后再执行

过程图：

效果图：

模仿输入框输入内容，发送请求 如果没有防抖 每次输入一个文字将会发送一个服务器请求 这样会浪费很多资源

解决方式：

1. 利用Lodash 库 链接：www.lodashjs.com/

<input type="text" id="searchInput" placeholder="请输入商品名称">

    <script src="./lib/lodash.min.js"></script>
    <script>
        const searchInput = document.querySelector('#searchInput')
        searchInput.addEventListener('keydown', _.debounce(function (e) {
            console.log(this.value);
        }, 1500))
    </script>

效果图：

2.自己封装函数

    <script>

        // 获取input
        const searchInput = document.querySelector('#searchInput');

        function debounce(fn, delay) {
            let timer;

            // 返回一个函数作为防抖函数
            return function () {

                // 每次调用防抖函数，都会清除之前的定时器
                clearTimeout(timer);

                // 设置新的定时器，在指定的延迟时间后执行回调函数
                timer = setTimeout(function () {
                    inputValue()
                }, delay);
            };
        }


        // 打印输入框的值
        function inputValue() {
            console.log(searchInput.value);
        }

        // 添加事件监听器，并调用防抖函数
        searchInput.addEventListener('input', debounce(inputValue, 1500));

    </script>

节流（throttle）

场景：

就是指连续触发事件但是在设定的一段时间内中只执行一次函数。 举栗子：设定1000毫秒执行，那你在1000毫秒触发在多次，也只在1000毫秒后执行一次

过程图：

效果图：

模仿页面滚动事件，在没有进行节流控制的时候，短时间频繁触发会导致页面的流畅度以及性能

解决方式：

1. 利用Lodash 库解决 链接：www.lodashjs.com/

 <h1>滚动页面拥有节流</h1>

    <script src="./lib/lodash.min.js"></script>
    <script>
        // 滚动事件处理函数
        function handleScroll() {
            console.log("页面正在滚动...");

        }
        // 监听页面滚动事件，并执行滚动事件处理函数，间隔1500毫秒执行一次
        window.addEventListener("scroll", _.debounce(handleScroll, 1500));
 </script>

效果图：

2.自己封装函数

  // 手动封装节流函数
        function throttle(func, delay) {
            let isThrottled = false;

            return function () {
                if (!isThrottled) {
                    isThrottled = true;

                    setTimeout(function () {
                        handleScroll()
                        isThrottled = false;
                    }, delay);
                }
            };
        }
        // 滚动事件处理函数
        function handleScroll() {
            console.log("页面正在滚动...");
        }

        // 监听页面滚动事件，并执行手动封装的节流滚动处理函数，间隔1500毫秒执行一次
        const throttledScroll = throttle(handleScroll, 1500);
        window.addEventListener("scroll", throttledScroll);

总结：

1. 防抖适用于需要等待事件停止触发后执行最后一次的情况。例如，输入框输入结束后，执行搜索操作。
2. 节流适用于需要在固定时间间隔内执行操作的情况。例如，页面滚动时，执行滚动处理函数。
3. 需要选择防抖与节流还需要根据具体的业务去选择，最终的目的就是优化代码的性能以及提高用户使用的体验