JavaScript防抖与节流

防抖：防止一个函数在一段事件内疯狂执行
场景：
1.搜索框input事件
2.鼠标移动mousemove事件
3.视窗大小变化resize事件
原理：不希望一个事件在短时间内执行多次，所以设置一个定时器，在一段时间后才执行，在定时器的时间内有触发时间了，就取消上一个事件的定时器，避免上次事件发生，然后又重新设置了一个新的定时器。

<script>
    function debounce(fn, delay) {
        
        var timer = 0
        var _delay = delay
        return function () {
            if (timer) {
                clearTimeout(timer)
            }
            timer = setTimeout(() => {
                fn()
            }, _delay);
        }
    }
    function resize() {
        console.log("执行")
    }
    window.addEventListener('mousemove', debounce(resize, 1000))
</script>

节流：节省流量
场景：主要用在懒加载时请求数据，在来回切换页面的时候，不会平凡请求接口，减少服务器的压力。

<script>
    function debounce(fn, delay = 800) {
        var timer = 0
        var _delay = delay
        return function () {
            if (!timer) {
                timer = setTimeout(() => {
                    fn()
                    timer=0
                }, _delay);
            }

        }
    }
    function resize() {
        console.log("执行")
    }
    window.addEventListener('mousemove', debounce(resize, 1000))
</script>