防抖与节流

防抖是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行。

防抖和节流的作用都是防止函数多次调用。区别在于，假设一个用户一直触发这个函数，且每次触发函数的间隔小于wait，防抖的情况下只会调用一次，而节流的 情况会每隔一定时间（参数wait）调用函数。

应用场景：

1.有些项目中，我们要使用到实时搜索，有些情况下，可能用户没有输完内容，就开始搜索了，这样体验不佳，我们就可以加上节流的方案

2.当需要改变窗口大小，或者滚动条位置的获取，或者元素拖放时的位置获取时，一般我们只想要最后一次的大小或者位置，可以使用防抖的方案

一、防抖
1、使用场景

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时；典型的案例就是输入搜索：输入结束后n秒才进行搜索请求，n秒内又输入的内容，就重新计时。

当我们只需要调用一个频繁事件的最后一次触发时，用防抖；

    即：在频繁事件不再触发的n秒后触发一次；

比如，监听输入框做关键字搜索，当用户1秒内没有再输入时我们再去搜索，而不是一边输入一边搜索；
2、思路

频繁事件的每一次触发做两件事，先清除定时器，再创建定时器；在定时器里执行我们最终的操作；
3、代码例子

<el-input
    v-model="val"
    placeholder="搜索"
    @input="searchKey"
    clearable
></el-input>
-----
    data(){
        return {
            timer:null
        }
    }

  methods: {
    // 使用防抖的关键字查询
    searchKey() {
      if (this.timer) clearTimeout(this.timer)
      this.timer = setTimeout(() => {
      //最后需要做的事情
      }, 500)
    },
 }

二、节流
1、使用场景

在某个频繁事件执行期间内，每隔固定时间才触发一次内部事件；

    即：n秒内，事件频繁发生，只会触发一次内部操作；

鼠标不断点击触发，mousedown(单位时间内只触发一次)，不会频繁触发

比如滑动窗口1秒来打印宽度，我们可以用节流获取100ms 200ms ... 1000ms这十次监听到的宽度；
2、思路

给需要频繁执行的事件做两件事，第一判断有没有定时器，有的话无作为；第二没有定时器就创建一个定时器；
把最终需要的操作放到定时器中等待触发；
3、代码例子

methods: {
    // 使用节流的关键字查询
    searchKey() {
        if(!timer){
            timer=setTimeout(()=>{
                //做一些事情
                timer=null;
            },500);
        }
    }
 }