js 防抖和节流

  let inp = document.getElementsByTagName('input')[0]
  inp.addEventListener('input', debounce(myFunction,1000), false)//防抖
  inp.addEventListener('input', throttle(myFunction, 1000), false)// 节流

function debounce(fn, delay) {
        var timer = null
        return function () {
          // 每当用户输入的时候把前一个 setTimeout clear 掉
          clearTimeout(timer)
          timer = setTimeout(() => {
            //  然后又创建一个新的 setTimeout, 这样就能保证interval 间隔内如果时间持续触发，就不会执行 fn 函数
            fn.call(this)
          }, delay)
        }
      }

// 节流(throttle)如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新生效,降低频率.
      // 1.利用setTimeout
      function throttle(fn, delay) {
        let valid = true
        return function () {
          if (!valid) {
            //休息时间 暂不接客
            return false
          }
          // 工作时间，执行函数并且在间隔期内把状态位设为无效
          valid = false
          setTimeout(() => {
            fn.call(this)
            valid = true
          }, delay)
          let time = new Date().getTime()
        }
      }

      // 2.利用时间戳
      function throttle(fn, delay) {
        let startTime = Date.now()
        return function () {
          var now = Date.now()
          if (now - startTime >= delay) {
            //大于1秒可以触发
            fn.call(this)
            startTime = Date.now()
          }
        }
      }