【自学】JS优化——防抖与节流

知识点

防抖：在固定时间内函数不执行，过了限时执行，在限时内再次调用会重新开启定时器
节流：在固定时间内执行一次，限时内再次调用，函数不执行，函数执行后判断条件打开
  应用场景：1、提交表单 2、高频监听事件

定时器的作用

• 防抖：执行函数
• 截流：改变下次函数执行的判断条件

代码分析

防抖

监听时判断定时器是否存在

• 若存在，表示规定时间内已有一次操作，清除该定时器并指定新定时器，重新计时。
• 若不存在，表示第一次操作或规定时间内操作已完成，只需重新计时。

表示方法一：

put.addEventListener('input', fangdou(event, 2000))
  function fangdou(event, time) {
    //只执行一次
    let fdTime = null
    //返回的函数才是真正被监听器绑定的
    return () => {
      if (fdTime) clearTimeout(fdTime)
      fdTime = setTimeout(event, time)
    }
  }

表示方法二：

  let fdTime = null
  put.addEventListener('input', () => {
    if (fdTime) clearTimeout(fdTime)
    fdTime = setTimeout(event, 2000)
  })

节流

监听时判断定时器是否存在
若不存在，表示在固定时间内第一次操作，设置定时器，关闭入口。当定时结束后，清除定时器，开启入口。
若存在，表示在固定时间内已有一次操作，无需设置。

box.addEventListener('touchmove', jieliu(event, 2000))
  function jieliu(event, time) {
    let jlTime = null
    return () => {
      if (!jlTime) {
        //event位置的改变，可以指定函数是否立即执行
        event();
        jlTime = setTimeout(() => {
          // event();
          jlTime = null
        }, time)
      }
    }
  }