js原生，函数封装，节流小案例

首先讲一下实现效果，鼠标在div中滑入数量+1 0.5秒只能执行一次。

思路：利用时间相减，移动后的时间-刚开始移动的时间》=500ms，执行数据渲染的函数

// 利用节流 鼠标经过 500ms 数字才可以显示
        // 思路： 利用时间相减，移动后的时间-刚开始移动的时间》=500ms
        // 执行数据渲染的函数

        // 获取div盒子
        const box = document.querySelector('.box')
        // 声明一个变量
        let i=1
        // 封装一个给div盒子渲染数据的函数 调用时将当前i的数据渲染给div盒子
        function mouseMoveFn(){
            box.innerHTML = i++
        }
        // 封装一个函数有两个值，第一个值是我们要调用的函数，第二个是毫秒数
        function throttle(fn,t=500){
            // 声明一个起始时间的变量
            let startTime = 0
            // 这里return一个匿名函数 这个函数要做的操作是↓
            // 判断当前时间-起始时间 是否大于500毫秒 
            // 如果是为true就执行 否则不会执行这一步就已经实现了节流
            return function (){
                // 记录当前时间
                let now=Date.now()
                if(now-startTime>=t){
                    // 如果是 调用渲染的函数，这个fn = mouseMoveFn
                    fn()
                    // 然后将当前时间复值给起始值，下次判断就继续从上次的起始值进行开始
                    startTime=now
                }
            }
        }
        // 绑定输入移动事件，将封装的渲染函数传递给这个函数
        box.addEventListener('mousemove',throttle(mouseMoveFn))