防抖,节流

防抖减少函数执行次数，只执行最后一次（执行第一次和最后次）

 <input type="text" class="inpt" />
 let inpt = document.querySelector('.inpt')
    inpt.oninput = debounce(function () {
      console.log(this.value)
    }, 500)
    function debounce(fn, delay) {
      //防抖减少函数执行次数，只执行最后一次（执行第一次和最后次）
      let t = null
      return function () {
        //如果t为true就清理掉上次的定时器
        if (t) {
          clearTimeout(t)
        }
        t = setTimeout(() => {
          //call()将fn的this指回inpt
          fn.call(inpt)
        }, delay)
      }
    }

节流(throttle),可以减少一段时间内事件的触发频率.

 <input type="text" class="inpt" />
 let inpt = document.querySelector('.inpt')
    inpt.oninput = throttle(function () {
      console.log(this.value)
    }, 500)
    function throttle(fn, time) {
      let t = true
      return function () {
        if (t) {
        //当第一个定时器开始后在定时器没有结束前不会进入if判断
          setTimeout(() => {
            console.log(this)
            fn.call(this)
            t = true
          }, time)
          t = false
        }
      }
    }