一、是什么

本质上是优化高频炉执行代码的一种手段
如: 浏览器的 scroll、mousemove、oninput灯事件在触发时,会不断地调用绑定事件上的回调函数,极大地浪费资源,降低前端性能

为了优化体验,需要对这类事件进行条用次数的限制,对此可以采用防抖和节流的方式来减少频率

定义 :

防抖 : 单位事件内,频繁触发一个事件,以'最后一次'触发为准
节流 : 单位事件内,频繁触发一个事件,只会触发一次一个经典的比喻:
想象每天上班大楼底下的电梯.把电梯完成一次运送,类比为函数的一次响应和执行
假设电梯超市限定为15s,不考虑人数容量限制

假设一个人进入电梯,15s后准时运送一次. 这为节流
假设一个人进入电梯,在等待电梯运行的15s中,又有一个人进入电梯.此时,电梯开始运送时间又为15s. 这为防抖

代码实现 :

节流 :

  /*
     节流场景 : 滚动条事件高频触发
     节流实现 : 
         1.声明一个全局变量存储触发时间   let lastTime = null
         2.每一次触发事件，获取当前时间   let currentTime = Date.now()
         3.判断 当前时间 与 上一次触发时间，是否超过间隔   currentTime-lastTime>=500
         4.如果超过触发间隔，则执行事件处理代码。 然后存储本次触发事件  lastTime = currentTime
  */
        //声明一个全局变量存储触发时间
        let lastTime = null
        window.onscroll = function () {
        //1.每一次触发，先获取本次时间戳
        let currentTime = Date.now()
        //2.判断当前时间 与 上一次触发时间 是否超过间隔
        if (currentTime - lastTime >= 500) {
          console.log(document.documentElement.scrollTop)
        //3.存储本次触发时间
          lastTime = currentTime
          }
       }

防抖 :

    /* 
    1.函数防抖 : 单位时间内，频繁触发一个事件， 以'最后一次'触发为准
    2.防抖应用场景: 输入框输入事件
    3.防抖流程 :
        3.1 声明一个全局变量存储定时器ID
        3.2 每一次触发交互的时候，先清除上一次定时器。 然后把本次事件处理代码放入定时器中
    */
        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) 
        }

二、区别

相同点 :

都可以通过 setTimeout 实现
目的相同,都是降低回调执行频率,节省计算资源不同点 :
函数防抖关注一定时间连续触发的时间,值在最后一次执行,而函数节流一段时间内只执行一次

面试官:什么是防抖和节流?有什么区别?如何实现? 我...

一、是什么

定义 :

代码实现 :

节流 :

防抖 :

二、区别