1.手ぶれ補正
アンチシェイクは、ユーザーの「手の震え」によって引き起こされる複数のクリックを防ぐこととして理解できます。たとえば、送信ボタン、ユーザーが複数回クリックすると、複数の送信リクエストが発生し、データの混乱が生じます。ユーザー入力に使用され、ユーザー入力リアルタイムクエリに従って、ユーザーが「常に」入力すると、値の変更が検出され、リクエストが継続的に送信されます。手ぶれ補正処理を通過した後、ユーザーが「複数回」クリックまたは入力すると、最後の結果のみが実行されます。
あらすじ：「手が震える」「何度も」「止まらない」。これを一言で要約すると、ユーザーが操作を続けると、対応する操作はトリガーされず、ユーザーが操作を停止するまで、対応する操作は実行されません。
主な実装の基礎: setTimeout (遅延器)。ユーザーの操作結果を指定した時間とトリガーまで遅延させ、対応する時間内に再度イベントがトリガーされると、前の遅延器がクリアされ、次の遅延器がオンとなり、これを繰り返します。
<template>
<div>
<button @click="state">防抖</button>
</div>
</template>
<script>
export default {
data() {
return {
timeId: "",
};
},
methods: {
//当用户触发state事件后，会清除上一次的延时器，并开启一个新的延时器，
// 当用户停止操作一秒钟后，才会触发延时器中的方法，持续点击不会触发
state() {
clearTimeout(this.timeId);
this.timeId = setTimeout(() => {
//查询方法
console.log(9999999);
}, 1000);
},
},
};
</script>
<style>
</style>2、スロットリング
スロットリングは、イベント トリガーの頻度を減らすこととして理解できます。たとえば、イベントは一定期間継続的にトリガーされ、1,000 回トリガーされ、巨大なイベント フローが作成されます。スロットルはこの期間中に行われ、値によりトリガーが許可されます。イベントは一度。このようにして、巨大なイベントの流れが切り詰められ、制限されます。たとえば、マウス移動イベントなど、頻繁にトリガーされるイベント メソッドは、パフォーマンスの無駄を避けるために、スロットリングを通じて処理できます。
概要: 「切り捨て」、「電流制限」。一定時間内に1回のみ発動可能。手ぶれ補正と比較すると、手ぶれ補正はクリックし続けた場合にのみ対応する動作をトリガーしません。また、スロットリングとは、クリックし続けた場合でも、一定期間に 1 回トリガーされることを意味します。
主な実装の基礎: setTimeout (タイマー)。タイマーが存在するかどうかを確認し、存在しない場合は、新しいタイマーを開始し、タイマー内の対応するロジックまたはリクエストを実行して、タイマーをクリアします。タイマーが存在するかどうかを確認し、存在する場合は返します。
<template>
<div>
<button @click="state">节流</button>
</div>
</template>
<script>
export default {
data() {
return {
timeId: "",
};
},
methods: {
state() {
//如果存在定时器则return不再向下执行
if (this.timeId) {
return;
} else {
//如果不存在定时器则创建一个定时器，在多长时间后执行，执行完成后执行方法或逻辑并关闭该定时器。
//然后不存在定时器，如此反复
this.timeId = setTimeout(() => {
console.log(88888);
localStorage.setItem(this.lastTimeStoreId, new Date().getTime());
clearTimeout(this.timeId);
this.timeId = null;
}, 1000);
}
},
},
};
</script>
<style>
</style>