函数的防抖与节流

函数的防抖

1. 函数防抖:单位时间内,频繁触发一个事件 ,以最后一次触发为准
2. 防抖应用场景:输入框输入事件
3. 防抖流程:
   • 声明一个全局变量存储定时器ID
   • 每一次触发交互事件的时候,先清除上一次定时器,然后把本次事件处理代码放入定时器中

        let timeID = null
        //输入框输入事件
        document.querySelector('input').oninput = function(){            
            //1.先清除之前的定时器
            clearTimeout(timeID)
            //2.开启本次定时器
            timeID = setTimeout(()=>{
                //function函数： this->window
                //箭头函数  this->上级this 表单
                console.log(`发送ajax,搜索内容是${this.value}`)
            },500) 
        }

函数的节流

1. 函数节流:单位时间内,频繁触发一个事件,只会触发一次
2. 节流场景:解决高频事件(滚动条事件高频触发)
3. 节流实现:
   • 声明一个全局变量储存触发时间戳
   • 每次触发事件,获取当前时间戳
   • 判断 当前时间戳 与 上一次触发时间戳,是否间隔 500
   • 如果超过触发时间戳,则执行事件处理代码.然后储存本次触发时间

        //声明一个全局变量存储触发时间
        let lastTime = null

        window.onscroll = function(){
            //1.每一次触发，先获取本次时间戳
            let currentTime = Date.now()
            //2.判断当前时间 与 上一次触发时间 是否超过间隔
            if( currentTime - lastTime >= 500 ){
                console.log( document.documentElement.scrollTop)
                //3.存储本次触发时间
                lastTime = currentTime
            }
            
        }