業務要件で、クリックする関数があります。
sdkメソッドを実行し、システムの写真関数をホイストします。
時間差がある場合、ユーザが頻繁にクリックするのを防ぐため、ブレ防止の機能を追加する必要があります。
<template>
<div @click="uploadPic">写真を撮るためにシステムを吊り上げるためにクリックする</div>
</template>
methods: {
uploadPic: vueDebounce('wakeUpPhotos', 2000, true),
wakeUpPhotos () {
// todo sdkメソッドとコールバックロジックを実行する。
}
}
vueDebounce (fnName, time, immediate) {
let timer = null
return function () {
let args = arguments
if (timer) { clearTimeout(timer) }
// 即時実行が必要かどうかを判断する
if (immediate) {
timer = setTimeout(() => {
timer = null
}, time)
if (!timer) { this[fnName](...args) }
} else {
timer = setTimeout(() => {
this[fnName](...args)
}, time)
}
}
}
キーポイント
- **fnName**はvueのメソッド名です。thisが適切な場所を指さないため、コールバック関数に直接渡すことはできません。
- コールバックが実行されると、thisは現在作成されているvueオブジェクトを指すので、fnNameに対応するコールバックメソッドを取得できます。
- ビジネス上の要件により、即時実行を追加するのが一般的です。
