防抖的概念及实现

什么是防抖？

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

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

<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>

上面的代码实现了 :

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