Rx operador de rebote con el primero y el último - javascript, angular, system.reactive, rxjs

¿Existe alguna combinación de operadores rx para obtener el primer y último evento sin rebote?

Esto se usará en escenarios de detalle maestro (o incluso escenarios de búsqueda) en los que queremos cargar de inmediato el primer elemento seleccionado y el último después de que el usuario deje de cambiar la selección.

Esto evitaría que se inyectara el tiempo de rebote cuando el usuario navega lentamente, pero también evitaría ráfagas de cambios.

Si rebotar El operador tenía una opción "inmediata" como underscore.js functoína antirrebote entonces una fusión de las 2 versiones del operador debounce generaría el resultado necesario.

Respuestas

10 por respuesta № 1

Para obtener el primer elemento sin rebote, puede usar throttle. Para obtener el último, puedes usar debounce. Sin embargo, debe asegurarse de que la fuenteusted está eliminando el rebote o la aceleración es una fuente activa ya que aplicará ambos operadores a la misma fuente. Luego, si desea que ambos elementos estén en el mismo observable, puede fusionar las secuencias estranguladas y sin rebote.

Por ejemplo, llamando source$ su fuente observable:

firstAndLast$ = Rx.Observable.merge(source$.debounce(Xms), source$.throttle(Xms))

Esto debería emitir el primer elemento y el últimoelemento de una ráfaga en el mismo flujo. Tenga en cuenta que en el caso límite de que no se trata de una ráfaga sino de un valor único que se produce dentro del período de tiempo de Xms, es posible que tenga el doble del mismo valor, uno al comienzo del período y otro al final. Una forma de protegerse contra eso, si tiene sentido, es usar distinctUntilChanged, entonces esto se convierte en:

firstAndLast$ = Rx.Observable.merge(source$.debounce(Xms), source$.throttle(Xms)).distinctUntilChanged()

---

2 para la respuesta № 2

Simplemente combinar el acelerador y el antirrebote como se sugiere en la respuesta anterior no fue suficiente para mí porque emite periódicamente nuevos eventos cuando se agota el tiempo del acelerador.

const debounced$ = source$.debounceTime(time)
return source$.throttleTime(time)
.merge(debounced$).distinctUntilChanged()

Con un time=30 obtendrías:

-a-a-a-a-a-a----
-a---a---a----a-

Para obtener solo el primer y último evento con un tiempo mínimo intermedio, usé:

const debounced$ = source$.debounceTime(time)
return source$.throttle(() => debounced)
.merge(debounced$).distinctUntilChanged()

Lo que resulta en:

-a-a-a-a-a-a----
-a------------a-

---

1 para la respuesta № 3

Un operador híbrido con comportamiento amigable con UX: https://www.npmjs.com/package/rx-op-debounce-throttle

Emite el primer y último elemento del lote, además de tantos eventos como sea posible dentro de la ventana, separados por al menos X ms.

---