uni-app 实现节流与防抖

提示：这次要讲的前端关于节流和防抖

---

一、什么是防抖？

防抖是指在频繁触发某一个事件时，一段时间内或者一定条件下不再触发该事件对应调用的函数。

二、防抖代码

1.示例 : 防止按钮多次连续点击

代码如下（示例）：

<template>
	<view>
		<view style="margin-top:80rpx;">
			<view style="width:200rpx;">
				<button 
				type="default" 
				@tap="buttonTap">点击</button>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			// 请求状态识别变量
			requestStatus : false
		}
	},
	methods:{
		buttonTap:function(){
			// 模拟按钮点击后会执行 api 请求，耗时 1 秒
			// 请求完成前 按钮点击将不会继续执行此函数
			if(this.requestStatus){
				// 利用 return 终止函数继续运行
				return false;
			}
			console.log('按钮点击函数执行');
			// 执行函数
			this.requestStatus = true;
			setTimeout(()=>{
				// 模拟执行完毕
				// 改变 requestStatus
				this.requestStatus = false;
			}, 1000);
		}
	}
}
</script>
<style>
</style>

对按钮点击触发函数的防抖控制 : 按钮事件执行未完成时不多次重复执行对应按钮的业务逻辑。

三、节流的概念

在事件持续触发的前提下，保证一定时间段内只调用一次事件处理函数，就是函数节流；

1. 利用延时器实现节流

利用可以延时器实现节流，原理是连续触发时只执行最后一次事件。

如下面的例子：

页面滚动（连续事件），我们利用 setTimeout() 函数只执行识别最后一次。

<template>
	<view>
		<view style="margin-top:80rpx;">
			<view style="height:2000px; width:750rpx; background-color: #006065;">
				滚动页面试试~~
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			// 延时器对象
			scrollTimer : null
		}
	},
	methods:{},
	onPageScroll:function(e){
		if(this.scrollTimer != null){
			clearTimeout(this.scrollTimer);
		}
		this.scrollTimer = setTimeout(()=>{
			console.log(e);
		}, 100)
	}
}
</script>
<style>
</style>

2. 利用计时器实现节流

利用计时器可以实现在指定的间隔时间内只执行一次逻辑，从而控制逻辑执行次数，达到节流的目的。

示例代码

<template>
	<view>
		<view style="margin-top:80rpx;">
			<view style="height:20000px; width:750rpx; background-color: #006065;">
				滚动页面试试~~
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			// 计时器时间
			countTime  : 0,
			// 计时器对象
			countTimer : null
		}
	},
	methods:{},
	onPageScroll:function(e){
		// 函数执行时先判断时间
		if(this.countTime >= 10){
			// 利用 return 终止函数继续运行
			return false;
		}
		// 开始计时
		this.countTimer = setInterval(()=>{
			if(this.countTime >= 500){
				this.countTime = 0;
				clearInterval(this.countTimer);
				return;
			}
			this.countTime += 10;
		}, 10);
		// 执行逻辑
		console.log(e);
	}
}
</script>
<style>
</style>

---