1はじめに
1.1関数デバウンスの
定義：コールバックはイベントがトリガーされてからn秒後に実行され、このn秒以内に再度トリガーされると、タイミングが再開されます;（王の栄光の街に戻る効果と同様です~~ ）
典型的な場合の入力検索：検索要求は入力が完了してからn秒後に行われ、コンテンツがn秒以内に再度入力されると時間が再計測されます。
実装の原則：関数アンチシェイクの基本的な考え方は、タイマーを設定し、指定された時間間隔内にコードを実行するときに最後のタイマーをクリアし、関数要求が停止して実行前の時間間隔を超えるまで、別のタイマーを設定することです。
使用するシーン：
- 検索して検索ボックスに入力し、最後の入力が完了した後にリクエストを送信します。
- 携帯電話番号とメールアドレスの入力確認。
- ウィンドウがサイズ変更をトリガーする場合、ブラウザーウィンドウのサイズを継続的に調整すると、このイベントが継続的にトリガーされ、シェイク防止を使用して1回だけトリガーされます。
1.2関数スロットルの
定義：関数は単位時間に1回だけトリガーできると規定されています。この単位時間内に関数が複数回
トリガーされた場合、1つだけが有効になります。通常、マウスのクリックが連続してトリガーされます。 n秒を超えると1回のクリックのみが有効になるように指定されています。
実装の原則：原則は、タイムスタンプを使用してコールバックの実行時間に達したかどうかを判断し、最後に実行されたタイムスタンプを記録し、スクロールイベントがトリガーされるたびにコールバックを実行し、現在のタイムスタンプが最後の実行タイムスタンプと間隔指定された期間に達した場合は、それを実行し、最後の実行のタイムスタンプを更新します。
使用するシーン：
- DOM要素のドラッグアンドドロップ機能の実装（mousemove）;
- フォームを送信するための複数回のクリック。
- マウス（マウス）が移動した距離を計算します。
- キャンバスシミュレーション製図板機能（mousemove）;
- シューティングゲームのマウスダウン/キーダウンイベント（単位時間あたり1発の弾丸のみを発射できます）。
- スクロールロード、より多くの操作をロードします。
2.コードの実装
Vue2.xでは、必要なときに簡単に参照できるように、utilsフォルダーに揺れ防止機能とスロットル機能を記述しています。
// 防抖
function _debounce(fn, delay = 500) {
var timer = null;
return function () {
var _this = this;
var args = arguments;
if (timer) clearTimeout(timer);
timer = setTimeout(function () {
fn.apply(_this, args);
}, delay);
};
}
// 节流
function _throttle(fn,delay = 1000){
var lastTime, timer, delay;
return function(){
var _this = this;
var args = arguments;
var nowTime = Date.now();
if(lastTime && nowTime - lastTime < delay){
if (timer) clearTimeout(timer);
timer = setTimeout(function(){
lastTime = nowTime;
fn.apply(_this,args);
},delay)
}else{
lastTime = nowTime;
fn.apply(_this,args);
}
}
}
export {
_debounce,
_throttle,
}
コンポーネント内の参照
<template>
<div class="about">
<el-input v-model="inputVal" placeholder="请输入内容" @input="inputChange"></el-input>
</div>
</template>
<script>
import {
_debounce, _throttle} from '@/utils/index.js'
export default {
data() {
return {
inputVal:'',
count:0,
};
},
methods: {
// input值改变时触发
inputChange:_debounce(function(){
console.log(this.inputVal)
},1000),
// 滚动条滚动时触发
scroll(){
this.count += 1;
console.log('scroll触发了'+ this.count +'次')
}
},
mounted() {
window.addEventListener('scroll', _throttle(this.scroll,5000));
},
};
</script>
<style lang="stylus" scoped>
.about{
width:100%;
height:800px;
}
</style>