JavaScript节流与防抖

节流(throttle)

所谓节流，就是指连续触发事件但是在n秒内只执行一次函数

一般用于轮播图，鼠标移动，滚动条滚动

假如一张轮播图完成切换需要300ms，不加节流效果，快速点击，则嗖嗖嗖的切换

加上节流效果，不管快速点击多少次，300ms时间内， 只能切换一张图片。

节流案例：

要求:鼠标在盒子上移动，里面的数字就会变化+1利用节流的方式，鼠标经过，500ms ，数字才显示

    <style>
        .box {
            width: 500px;
            height: 500px;
            background-color: #ccc;
            color: #fff;
            text-align: center;
            font-size: 100px;
        }
    </style>
<div class="box"></div>

        const box = document.querySelector('.box')
        let i = 1
        function mouseMove() {
            box.innerHTML = i++
        }
        //节流函数
        function throttle(fn, t) {
            let starTime = 0
            return function () {
                let now = Date.now()
                if (now - starTime >= 500) {
                    fn()
                    starTime = now
                }
            }
        }
        // throttle(mouseMove, 500)
        box.addEventListener('mousemove', throttle(mouseMove, 500))

防抖(debounde)

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

北京买房政策:需要连续5年的社保，如果中间有一年断了社保， 则需要从新开始计算

比如，我2020年开始计算，连续交5年，也就是到2024年可以买房了，包含2020年，但是我2024年断社保了,整年没交，则需要从2025年开始算第一年往后 推5年...也就是2029年才能买房...

使用场景：搜索框防抖

案例：

鼠标在盒子上移动，鼠标停止之后，500ms后里面的数字就会变化+1

        const box = document.querySelector('.box')
        let i = 1
        function mouseMove() {
            box.innerHTML = i++
        }
        function debounce(fn, t) {
            let timeId;
            return function () {
                if (timeId) {
                    clearTimeout(timeId)
                }
                timeId = setTimeout(function () {
                    fn()
                }, t)
            }
        }
        box.addEventListener('mousemove', debounce(mouseMove, 500))

利用lodash实现节流与防抖

节流

    <script src="./lodash.min.js"></script>
    <script>
        const box = document.querySelector('.box')
        let i = 1
        function mouseMove() {
            box.innerHTML = i++
        }
        
        box.addEventListener('mousemove', _.throttle(mouseMove, 500))
    </script>

防抖

    <script src="./lodash.min.js"></script>
    <script>
        const box = document.querySelector('.box')
        let i = 1
        function mouseMove() {
            box.innerHTML = i++
        }
        
        box.addEventListener('mousemove', _.debounce(mouseMove, 500))
    </script>