javascript中的防抖与节流函数

1、什么是函数防抖

定义：限制一个函数在一定时间内只能执行一次。

举个例子：王者荣耀里面当英雄要回城的时候，需要8s时间才能完成回城的动作，但如果在这段时间期间受到伤害就会打断回城，重新回城又得从8时开始。

实例代码：

    <script>
        // 给盒子注册 鼠标移动事件
        document.querySelector('div').addEventListener('mousemove', throttle(mousemove, 2000))
        // 计数器
        let i = 0
        function mousemove() {
            i++
            document.querySelector('div').innerHTML = i
        }
        //利用延时函数实现防抖
        function throttle(fn,time){
            let timer
            console.log(1);
            return function(){
                clearTimeout(timer)
                timer = setTimeout(()=>{
                    fn()
                },time)
            }
        }
    </script>

2、什么是函数节流

概念：函数防抖（debounce），防抖触发高频率事件时n秒后只会执行一次，如果n秒内再次触发，则会重新计算。

举个例子：坐电梯的时候，如果电梯检测到有人进来（触发事件），就会多等待 10 秒，此时如果又有人进来（10秒之内重复触发事件），那么电梯就会再多等待 10 秒。

实例代码：

<script>
        // 给盒子注册 鼠标移动事件
        document.querySelector('div').addEventListener('mousemove', throttle(mousemove, 2000))
        // 计数器
        let i = 0
        function mousemove() {
            i++
            document.querySelector('div').innerHTML = i
        }
        // 利用时间戳实现 函数节流
        function render(fn,time){
            let times = +new Date()
            return function(){
                let timee = +new Date()
                if(timee-times>time){
                    fn()
                    times=timee
                }
            }
        }
</script>