防抖和节流又是什么东西？

用来处理某个工作短时间内过于频繁触发的场景，只是根据不同的处理方式有不同的说法。
应用场景：防止用户连续多次点击提交表单、监听滚动、窗口大小、输入框内容校验等高频事件

简要概念：

节流即在一个事件被连续的触发过程中，以一个固定的时间长度，间隔的去执行一个函数；
防抖即在一个事件被连续的触发过程中，只在最后一次触发时执行一个函数

防抖：某个函数在短时间内只执行最后一次。

意思也就是说，函数被触发时，需要先延迟，在延迟的时间内，如果再次被触发，则取消之前的延迟，重新开始延迟。这样就能达到，只响应最后一次，其余的请求都过滤掉。

这种处理方式有很多实际的应用场景：比如对输入框数据的校验处理，没必要每输入一个字符就校验一遍；

节流：某个函数在指定时间段内只执行第一次，直到指定时间段结束，周而复始。

跟防抖不一样的是，节流是指定时间段内只执行第一次，也就是这段时间内，只需要响应第一次的请求即可，后续的请求都会被过滤掉，直到下个时间段，重新来过，周而复始。

应用场景：Android 里的屏幕刷新机制，每个帧（16.6ms）内，不管进行了多少次请求界面刷新的操作，只需响应第一次的请求，去向底层注册监听帧信号即可。因为接收到帧信号后，是通过遍历 View 树来刷新界面，所以注册的动作只需要进行一次就够了。Vue 的虚拟 DOM 的刷新也是类似的机制。

写一个utils.js：

/*
* 自己写一个防抖函数吧 (注意维护同一个timer)
* */
防抖代码
export function debounce(fn, delay) {
  var timer = null;// //定义一个变量作为等会清除对象；记录上一次的延时器
  return function() {
    var args = arguments;
    var that = this;
    clearTimeout(timer) // 清除上一次延时器
    timer = setTimeout(function() {
        fn.apply(that,args)
    }, delay);
  }
}
/*
* 自己写一个节流函数吧
* */
export function throttle (fn, delay) {
  let clickNow = true
  return function () {
    if (clickNow) {
      clickNow = false
      setTimeout(function () {
//为什么要通过 apply 这种修改函数内部 this 的方式来调用原函数？直接 fn() 不行吗？
//这里之所以要通过 call 方式来修改原函数的 this，
//是因为，原函数通过参数进行传递时，是只会被当做普通函数处理，不管原函数本来是否挂载在某个对象上。
//所以，如果 debounce 内部直接以 fn() 方式调用原函数，会导致原函数的内部 this 指向发生变化。
//这边执行了节流函数fn()
        fn.apply(this, arguments)
        clickNow = true
      }, delay)
    }
  }
}

使用：

    clickFn: throttle(function () {
      console.log('节流测试')
    }, 1000),

vue中使用防抖例子

搜索排版代码

<input type="text" placeholder="输入用户名" v-model="userName" v-on:input="userSearch">

在公共的js文件utils.js中添加防抖函数如下：

export default {
   debounce(fn, delay) {
     var timer = null;// //定义一个变量作为等会清除对象；记录上一次的延时器
     return function() {
       var args = arguments;
       var that = this;
       clearTimeout(timer) // 清除上一次延时器
       timer = setTimeout(function() {
          fn.apply(that,args)
       }, delay);
     }
   }
}

防抖搜索功能

import utils from "@/js/utils";
 
export default {
 
    methods: {
        //使用防抖函数
        uaerSearch: utils.debounce(function() {
            this.$axios.get('接口',this.userName).then(res=>{})
         },200)
    }
 
}