一、节流模式

💪时间戳实现：

实现原理：点击时间戳和起始时间戳的差值

• 🕐.记录起始时间戳，和点击时间戳
• 🕑.当点击时间戳-起始时间戳>等待的时间
• 🕒.把点击时间戳赋值给起始时间戳

        let perTime = null
        function wait() {
            let newTime = new Date()
            console.log('######', newTime - perTime)
            if (newTime - perTime > 1000) {
                console.log('看的到我吗，我是秃头蛙蛙！！')
                perTime = newTime
            }
        }

🦾定时器实现：

实现原理：使用定时器和if判断来实现

• 🕐设置初始值为空
• 🕑判断初始值是否为空
• 🕒为空执行定时器，并把定时器的值赋给初始值
• 🕓定时器结束把初始值变为空

        let timer = null
        function wait() {
            console.log('1111',timer)
            if (!timer) {
            console.log('2222',timer)
                timer = setTimeout(() => {
                    timer = null
                    console.log('看的到我嘛，我是秃头蛙蛙！！！')
                }, 1000)
                console.log('444', timer)
            }
        } 

二、防滚模式

实现原理：定时器和清除定时器来实现

• 🕐定义初始值为空，然后触发清除定时器
• 🕑触发定时器，把定时器的返回值赋值给初始值
• ⚠️ 每次触发清除定时器，都是清除上一次定时器

        function wait(){
            console.log('####',timeer)
            clearTimeout(timeer)
            timeer = setTimeout(()=>{
                console.log('看不看的到我，我是菜鸡秃头蛙蛙！！！')
            },1000)
            console.log('222@@@',timeer)
        }

防抖和节流在前端算是比较常用到的，只是写一个简单的实现原理，如果不理解，打印出来看看就可以理解大部分了。