js防抖与节流详解

函数防抖

定义：单位时间内，频繁触发事件，只会触发最后一次
使用场景：窗口大小改变、输入框内容校验等
防抖流程：

• 声明一个全局timeID储存定时器id
• 每一次触发点击事件，先清楚上一个定时器，以本次触发为准
• 开启本次定时器 代码：以输入框为例

//(1)声明一个全局timeID存储定时器id
        let timeID = null
        document.querySelector('input').addEventListener('input',function(){
            
            //(2)每一次触发事件,先清除上一次定时器，以本次触发为准
            clearTimeout(timeID)
            //(3)开启本次定时器
            /* 
            function函数: 定时器this指向window
            箭头函数 : 访问上级作用域this-> input
            */
            timeID = setTimeout( ()=>{
                console.log(`您的搜索内容为${this.value}`) 
            },500)
            
        })

函数节流

定义：单位时间内，频繁触发事件，只会触发一次
使用场景：鼠标不断点击触发、监听滚动事件等
防抖流程：

• 声明一个全局变量记录当前触发时间
• 每一次触发事件的时候，获取当前时间
• 判断：当前时间 - 上一次时间 >= 节流间隔
• 储存本次触发事件 代码：

//(1)声明一个全局变量记录 当前触发时间
        let lastTime = null

        //页面滚动条事件
        let i = 1
        window.onscroll = function(){
            //(2)获取现在时间
            let currentTime = Date.now()
            //(3)判断 当前时间 - 上一次触发事件 >= 节流间隔
            if( currentTime - lastTime >= 500 ){
                console.log(`第${i++}次触发`)
                lastTime = currentTime
            }
            
        }