非常にシンプルな絞りと手ブレ防止、わかりやすい

スロットリングとは、関数が特定の期間に 1 回だけ実行されることを意味します。

この関数の実装ロジック:

1. 2 秒以内に何度ボタンを押しても関数は 1 回しか実行されないため、2 秒経過したかどうかの判定が必要です。

2. 2 秒に 1 回しか実行されず、時間がかかるため、タイマー 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.クリックするたびにイベントが再トリガーされ、タイミングが再開されるため、タイマーをクリアする関数が必要です

クリアタイムアウト（）

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>