节流的概念及实现

节流的概念

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

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>