前端面试题之函数防抖与节流

函数防抖

1.函数防抖 : 单位时间内，频繁触发事件，只会触发最后一次
2.经典场景 ：
(1)输入框实时输入 oninput
(2)减少触发输入的频率，提高代码性能
3.防抖流程 :
(1)声明一个全局timeID存储定时器id
(2)每一次触发事件,先清除上一次定时器，以本次触发为准
(3)开启本次定时器

//(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.函数节流 : 单位时间内，频繁触发事件，只会触发一次
2.应用场景 : 降低高频事件触发频率
(1)鼠标移动: onmousemove
(2)滚动条事件: onscroll
3.节流流程
(1)声明一个全局变量记录 本次触发时间
(2)每一次触发事件的时候, 获取当前时间
(3)判断 当前时间 - 上一次触发事件 >= 节流间隔
(4)存储本次触发事件，用于下一次判断

//(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
        }
      }