防抖节流的区别

在一定时间内多次触发事件，只会触发最后一次

实现防抖的方法有以下几步组成

1. 声明一个变量存储定时器ID
2. 每一次触发交互的时候，先清楚上一次的定时器。然后把本次事件处理代码放入定时器中

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

2. 节流

在一定事件内多次触发事件，只会触发第一次

实现节流的发放由以下几步组成

1. 声明一个变量存储触发时间
2. 每一次触发事件，获取当前事件
3. 判断当前时间与上一次触发时间是否超过间隔
4. 如果超过触发间隔，则执行事件处理代码，然后存储本次触发时间

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