Interaction with firebase API problematic

[dsl101]

I'm using v-observe-visibility to set 'read' markers on a list of Vue components. Each one registers a handler, and they are called exactly as I would expect. But, as soon as I put a firebase api call into the handler (see below), the visibility events happen in series, with a gap of throttle milliseconds between each one:

<template>
  <q-card
    v-observe-visibility="{
      callback: handleVisibilityChanged,
      throttle: 1500,
      intersection: {
        threshold: 1.0,
      }
    }"
    .
    .
    .
    handleVisibilityChanged (visible) {
      if (this.unread && visible) {
        const fbRef = firebase.database().ref(`/users/${this.uid}/readItems/${this.eventId}/${this.pageId}`)
        fbRef.set([this.id, ...this.readItemIds()])}
      }

If I replace the fbRef.set() call with a console.log(), I can see all the events are triggered at pretty much the same time, as the q-card elements are scrolled into view. The firebase call returns a promise, and the update happens in the background, but it seems like the event loop might be getting stalled somehow waiting for the firebase library to complete its task.

Can you shed any light on why making the firebase calls has this effect, and is there a way round it with v-observe-visibility?

Tx

[dsl101]

Just been experimenting, and whilst I don't fully understand the JS event loop, I think I was right in the interaction between v-observe-visibility and functions that return promises. Replacing the direct call to the firebase API with:

          setTimeout(() => {fbRef.set([this.id, ...this.readItemIds()])})

makes the situation much better. I guess it allows the event handlers to all fire, whilst adding the API calls to the end of the queue.