极其简单的节流与防抖，一看就懂

节流即某个时间内该函数只执行一次。

该功能的实现逻辑：

1、两秒内不管点击多少次按钮，函数只执行一次，因此需要一个判断，判断是否过了2秒。

2、两秒内只执行一次，涉及到时间，因此还需要一个定时器 setTimeout()

好了，分析完了可以开始写代码了

<template>
	<view>
		<button @click="HandelJieliu">{
   
   {number}}</button>
		<button @click="fangdou">{
   
   {age}}</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				number:20,
				age:100,
				jieliu:null,
				fangdou:null
				
			}
		},
		methods: {
            //节流函数
			HandelJieliu(){
				if(this.jieliu){ //判断setTimeout()定时器在两秒内存在否，存在就返回什么都不做
					return 
				}else{//如果定时器不存在，就创建一个定时器
					this.number +=1
					this.jieliu = setTimeout(()=>{
						this.jieliu = null //两秒后清除定时器，等待下一次的点击
					},2000)
				}
			},
            //防抖函数
			HandleFangdou(){
				clearTimeout(this.fangdou)
				this.fangdou = setTimeout(()=>{
					this.age +=1
				},1000)
			}
		}
	}
</script>

<style>

</style>

防抖就跟王者荣耀回城一样，只要你点击回城就会重新开始计时，不管你点击多少次回城按钮，只有最后一次的回城才是有效的。

功能实现逻辑：

1、每次点击都会重新触发事件，重新开始计时，所以需要一个清空定时器的函数

clearTimeout（）

2、需要计时，因此需要一个定时函数，setTimeout（）

<template>
	<view>
		<button @click="HandelJieliu">{
   
   {number}}</button>
		<button @click="fangdou">{
   
   {age}}</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				number:20,
				age:100,
				jieliu:null,
				fangdou:null
				
			}
		},
		methods: {
			//节流函数
			HandelJieliu(){
				if(this.jieliu){ //判断setTimeout()定时器在两秒内存在否，存在就返回什么都不做
					return 
				}else{//如果定时器不存在，就创建一个定时器
					this.number +=1
					this.jieliu = setTimeout(()=>{
						this.jieliu = null //两秒后清除定时器，等待下一次的点击
					},2000)
				}
			},
			//防抖函数
			HandleFangdou(){
				clearTimeout(this.fangdou) //每次都需要先清空定时器
				this.fangdou = setTimeout(()=>{ //定时器函数，1秒后执行
					this.age +=1
				},1000)
				//整个逻辑就是每一次点击都先清空计时器，让上一次的计时失效，当不在点击时就会执行
				//最后一次定时函数。
			}
		}
	}
</script>

<style>

</style>

极其简单的节流与防抖，一看就懂

猜你喜欢