uniapp 防抖和节流的使用

防抖：在一个时间段内触发几次事件，就延迟触发几次，并只触发最后一次事件。
（一直快速触发几分钟后停止，只会执行最后的那一次事件）

节流：在规定时间内仅能触发一次，但到了下一个时间段，也还会继续触发一次事件。
（一直快速触发几分钟后停止，会执行多次事件）

<template>
	<view>
		<button type="primary" @click="fd">防抖</button>
		<button type="primary" @click="jl">节流</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fdFlag: null,
				jlFlag: true
			}
		},
		methods: {
			/** 防抖 **/
			fd() {
				let that = this
				clearTimeout(this.fdFlag)
				this.fdFlag = setTimeout(() => {
					that.fdDoing()
					that.fdFlag = null
				}, 800)
				// 在此时间段触发几次事件，就延迟触发几次，并只触发最后一次事件。
			},
			fdDoing() {
				console.log('防抖事件触发')
			},
			
			/** 节流 **/
			jl() {
				let that = this
				if (!this.jlFlag) {
					return
				}
				this.jlFlag = false
				setTimeout(() => {
					that.jlDoing()
					that.jlFlag = true
				}, 2000)
				// 函数被点击一次触发执行后，2秒内再点击函数不会被触发事件，可理解为每2秒触发一次事件。
			},
			jlDoing() {
				console.log('节流事件触发')
			}
		}
	}
</script>

<style>
	button{
		margin: 20rpx;
		width: 300rpx;
	}
</style>