1.防抖

函数防抖，在一段连续操作结束后，处理回调，利用clearTimeout和 setTimeout实现，函数防抖关注一定时间连续触发的事件，只在最后执行一次。

<body>
    <input type="text">
    <script>
        const inp = document.querySelector('input')
        inp.oninput = debounce(() => {
            console.log(inp.value);
        }, 500)
        function debounce(fn, delay) {
            let t = null
            return function () {
                if (t !== null) {
                    clearTimeout(t)
                }
                t = setTimeout(() => {
                    fn()
                }, delay)
            }
        }
    </script>
</body>

2.节流

函数节流，在一段连续操作中，每一段时间只执行一次，频率较高的事件中使用来提高性能，函数节流一段时间内只执行一次。

<body>
    <script>
        let flag = true
        window.onscroll = throttle(() => {
            console.log(1);
        }, 500)

        function throttle(fn, delay) {
            let flag = true
            return function () {
                if (flag) {
                    setTimeout(() => {
                        fn()
                        flag = true
                    }, delay)
                }
                flag = false
            }
        }
    </script>
    <style>
        body {
            height: 2000px;
        }
    </style>
</body>

防抖节流

1.防抖

2.节流