tweak debounce/throttle
This commit is contained in:
parent
6d085eea36
commit
91402d06fc
|
@ -9,31 +9,35 @@
|
||||||
<style>
|
<style>
|
||||||
.status-article-compose-box {
|
.status-article-compose-box {
|
||||||
grid-area: compose;
|
grid-area: compose;
|
||||||
|
background: var(--main-bg);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<script>
|
<script>
|
||||||
import ComposeBox from '../../_components/compose/ComposeBox.html'
|
import ComposeBox from '../../_components/compose/ComposeBox.html'
|
||||||
import { store } from '../../_store/store'
|
import { store } from '../../_store/store'
|
||||||
import { doubleRAF } from '../../_utils/doubleRAF'
|
import debounce from 'lodash/debounce'
|
||||||
|
import throttle from 'lodash/throttle'
|
||||||
|
|
||||||
|
const DEBOUNCE_DELAY = 400
|
||||||
|
const THROTTLE_DELAY = 150
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
oncreate() {
|
oncreate() {
|
||||||
let lastContentWarningShown = false
|
const recalc = () => {
|
||||||
this.observe('composeData', composeData => {
|
requestAnimationFrame(() => {
|
||||||
doubleRAF(() => {
|
|
||||||
this.fire('recalculateHeight')
|
this.fire('recalculateHeight')
|
||||||
let contentWarningShown = !!composeData.contentWarningShown
|
|
||||||
if (contentWarningShown !== lastContentWarningShown) {
|
|
||||||
// TODO: this animation lasts 333ms, hence need to recalculate again
|
|
||||||
setTimeout(() => {
|
|
||||||
requestAnimationFrame(() => {
|
|
||||||
this.fire('recalculateHeight')
|
|
||||||
})
|
|
||||||
}, 350)
|
|
||||||
}
|
|
||||||
lastContentWarningShown = contentWarningShown
|
|
||||||
})
|
})
|
||||||
}, {init: false})
|
}
|
||||||
|
// debounce AND throttle due to 333ms content warning animation
|
||||||
|
const debounced = debounce(recalc, DEBOUNCE_DELAY)
|
||||||
|
const throttled = throttle(() => {
|
||||||
|
debounced()
|
||||||
|
recalc()
|
||||||
|
}, THROTTLE_DELAY, {
|
||||||
|
leading: true,
|
||||||
|
trailing: true
|
||||||
|
})
|
||||||
|
this.observe('composeData', throttled)
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
ComposeBox
|
ComposeBox
|
||||||
|
|
Loading…
Reference in a new issue