import {
debounce } from 'lodash-es'
export default {
methods: {
// 使用 Lodash 的防抖函数
click: debounce(function () {
// ... 对点击的响应 ...
}, 500)
}
}
Cependant, cette approche est problématique pour les composants réutilisables, car la fonction pré-stabilisée est à état : elle maintient un état interne à l'exécution. Si plusieurs instances de composants partagent la même fonction anti-tremblement prédéfinie, elles s'affecteront mutuellement.
Pour garder la fonction anti-shake de chaque instance de composant indépendante l'une de l'autre, nous pouvons à la place créer cette fonction de pré-shake dans le hook de cycle de vie créé :
export default {
created() {
// 每个实例都有了自己的预置防抖的处理函数
this.debouncedClick = _.debounce(this.click, 500)
},
unmounted() {
// 最好是在组件卸载时
// 清除掉防抖计时器
this.debouncedClick.cancel()
},
methods: {
click() {
// ... 对点击的响应 ...
}
}
}