防抖和节流

说明

节流函数、防抖函数笔记总结

本专栏已迁移 详见https://github.com/sami-jiaze/myCoding

手写防抖函数

防抖函数顾名思义可以理解为在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。这可以使用在一些点击请求的事件上，避免因为用户的多次点击向后端发送多次请求，以最后一次为准

    let ipt = document.querySelector("input")

    function fn(f,wait) {
      let timer = null
      return function(...args){
        if (timer) {
          clearTimeout(timer)
          timer = null
        }
        timer = setTimeout(() => {
          f.apply(this,args)
        }, wait);
      }
    }

    ipt.oninput = fn(function (event) {
      console.log(this.value);
      console.log(event);
    },2000)

手写节流函数

函数节流是指规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。

与防抖不同的是节流会按一定时间触发而防抖则根据最后一次调用的时间触发

举个例子：

input输入框如果我一直输入不停止即小于防抖定义的wait时间，则最后一次调用未知触发防抖函数不会有回调函数出现

节流函数则不管是否还在输入一段时间后固定会触发一次 用于限制高频调用

      function fn(f,wait) {
        let curTime = Date.now()
        return function (...args) {
          let nowTime = Date.now()
          if (nowTime - curTime >= wait ) {
            curTime = Date.now()
            return f.apply(this,args)
          }
        }
      }

      let ipt = document.querySelector("input")
      ipt.oninput = fn(function (event) {
        console.log(event);
        console.log(this.value);
      },2000)