手写防抖和节流

防抖

指触发事件后在规定时间内回调函数只能执行一次，如果在规定时间内又触发了该事件，则会重新开始算规定时间。

即：延时执行

大白话：一个流浪汉向你乞讨：给我点钱吧，给我点钱吧，给我点钱吧....，他讲了十次，你发了善心，最后给了钱

<body>
    <button>节流</button>

    <script>
        let button = document.querySelector('button');
        button.onclick = debounce(add, 2000);


        function add(num, num2) {
            console.log(1 + num + num2)
        }
        //防抖
        function debounce(func, delay) {
            let time = null;
            return function (...arg) {
                if (time) clearTimeout(time);
                time = setTimeout(() => {
                    func.apply(this, arg)
                }, delay);
            }
        }
    </script>
</body>

节流

当持续触发事件时，在规定时间段内只能调用一次回调函数。如果在规定时间内又触发了该事件，则什么也不做,也不会重置定时器.

即：定频率执行

大白话：一个流浪汉向你乞讨：给我点钱吧，给我点钱吧，给我点钱吧....，他讲了十次。你发了善心，在他第一次讲的时候就给了钱，在他第十次讲的时候又给了一次钱

<body>
    <button>节流</button>

    <script>
        let button = document.querySelector('button');
        button.onclick = throttle(add, 2000);


        function add(num, num2) {
            console.log(1 + num + num2)
        }


        function throttle(func, wait) {
            let old = 0;
            return () => {
                let now = new Date().valueOf();
                if (now - old > wait) {
                    let context = this;
                    let args = [1, 2];
                    func.apply(context, args);
                    old = now;
                }
            }
        }

        //定时器实现
        function throttle(func, wait) {
            let timeout;
            return () => {
                if (!timeout) {
                    timeout = setTimeout(() => {
                        let context = this;
                        let args = [1, 2];
                        func.apply(context, args);
                        timeout =null;
                    }, wait);
                }
            }
        }
    </script>
</body>

那在项目中到底哪里需要防抖和节流呢？

节流

图片说明
以商品进度条为例，不是滚动的每个时刻都要监听进度条，因此可以通过节流来限制

防抖

图片说明
以商品图片加载为例，图片加载使得滚动