防抖和节流

**

一、防抖

**防抖：指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间
场景：input验证、搜索联想、resize
抖动停止后的时间超过设定的时间时执行一次函数。注意：这里的抖动停止表示你停止了触发这个函数，从这个时间点开始计算，当间隔时间等于你设定时间，才会执行里面的回调函数。如果你一直在触发这个函数并且两次触发间隔小于设定时间，则一定不会到回调函数那一步。

1、创建debounce.js：

const debounce=function(fn, delay){
	let timer = null
	return function(){
		let content = this;
		let args = arguments;
		if(timer){
			clearTimeout(timer)
		}
		timer = setTimeout(()=>{
			fn.apply(content,args)
		}, delay)
	}
}
 
export default debounce```

**2、页面中使用**

```c
 
<el-input v-model="serves" placeholder="请输入内容" style="width:300px;"></el-input>
 
 
import debounce from "@/common/debounce"
 
 
data() {
  return {
    serves:''
  }
}
 
 
watch:{
  serves(news) {
    this.changeSeletc()
  }
},
 
methods:{
    changeSeletc:debounce(function() {
      console.log('防抖：',this.serves)
    },500),
}```

## 二、节流

节流：指连续触发事件但是在 n 秒中只执行一次函数。

场景：按钮点击、下拉加载、鼠标滚动、拖拽动画（节流通常用在比防抖刷新更频繁的场景下，而且大部分是需要涉及动画的操作。）

按照设定的时间固定执行一次函数，比如200ms一次。注意：固定就是你在mousemove过程中，执行这个节流函数，它一定是200ms（你设定的定时器延迟时间）内执行一次。没到200ms，一定会返回，没有执行回调函数的。

**1、创建throttle.js：**

```c
const throttle=(func, delay) => {
	// 缓存一个定时器
	let timer = null
	// 这里返回的函数是每次用户实际调用的节流函数 
	return function(...args) {
		if (!timer) { //判断timer是否有值,如果没有则说明定时器不存在即可继续执行
			timer = setTimeout(() => { //关
				func.apply(this, arguments)
				timer = null; //开
			}, delay)
		}
	}
}
export default throttle

2、页面中使用

<el-button type="primary" @click="submit">提交</el-button>
 
 
import throttle from "@/common/throttle"
 
 
methods:{
    submit:throttle(function()  {
		console.log('节流')
    },500)
}```