tweak debounce/throttle

This commit is contained in:
Nolan Lawson 2018-03-30 08:43:36 -07:00
parent 6d085eea36
commit 91402d06fc
1 changed files with 19 additions and 15 deletions

View File

@ -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