【vue】防抖与节流函数

前言

防抖、节流是为了在某个事件频繁发生时，不把这个频繁的事件内的操作也这么频繁的触发；

一、防抖

1、使用场景

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

• 即：在频繁事件不再触发的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秒内，事件频繁发生，只会触发一次内部操作；

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

2、思路

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

3、代码例子

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