Estoy escuchando el observable que puede devolver un valor verdadero o falso; lo único que quiero hacer es configurar throttleTime para la llamada de función cuando es verdadero y no tenerlo cuando es falso. Así que hice algún tipo de solución para eso, pero no me gusta esta solución. Probé un enfoque diferente donde traté de hacerlo en el efecto de las acciones pero sin éxito.
Así que este es el observable:
this.store$ .pipe( takeUntil(this.componentDestroyed$), select(selectGlobalsFiltered([ GlobalPreferencesKeys.liveAircraftMovement])), distinctUntilChanged() ) .subscribe((globals) => { if (globals && globals[GlobalPreferencesKeys.liveAircraftMovement] !== undefined) { this.isLiveMovementEnabled = (globals[GlobalPreferencesKeys.liveAircraftMovement] === 'true'); } if (!this.isLiveMovementEnabled) { this.processPlaneData = throttle(this.processPlaneData, 4000); } else { this.processPlaneData = this.notThrottledFunction; } }); Y como puede ver, he creado excat con el mismo método que es 'puro', notThrottledFunction , y lo estoy asignando cuando es necesario.
processPlaneData(data: Airplane[]): void { this.store$.dispatch(addAllAirplanes({ airplanes: data })); } notThrottledFunction(data: Airplane[]): void { this.store$.dispatch(addAllAirplanes({ airplanes: data })); }Básicamente, esta es una solución que funciona, pero estoy bastante seguro de que hay un mejor enfoque para hacer tales cosas.
* throttle(this.processPlaneData, isLiveMovementEnabled ? 0 : 4000) no funciona
Entonces, en el segundo enfoque en el que traté de hacer esto dentro del efecto, agregué un nuevo argumento para la acción addAllAirplanes isLiveMovementEnabled: this.isLiveMovementEnabled
addAllAirplanes$ = createEffect(() => this.actions$.pipe( ofType(ActionTypes.ADD_ALL_AIRPLANES), map((data) => { if (data.isLiveMovementEnabled) { return addAllAirplanesSuccessWithThrottle(data); } else { return addAllAirplanesSuccess(data); } } ) ); Y luego agregué otro efecto para addAllAirplanesSuccessWithThrottle
addAllAirplanesThrottle$ = createEffect(() => this.actions$.pipe( ofType(ActionTypes.ADD_ALL_AIRPLANES_THROTTLE), throttleTime(4000), map((data) => addAllAirplanesSuccess(data)) ) );Pero no funciona. ¿Alguien me puede ayudar?
(No está claro cómo llegan los datos en su código de ejemplo, pero asumiré un Observable)
throttle y throttleTime son similares a su caso de uso, pero creo que tiene sentido crear su propia implementación personalizada sin ellos. Sugeriría administrar el tiempo usted mismo, usando Fecha para determinar los deltas de tiempo.
Ya almacenó en caché el booleano de filtrado en vivo en el estado del componente, por lo que podemos manejar todo el flujo de datos desde su actualización de posición observable y filtrarlos manualmente (que es todo lo que hace el acelerador, pero espera que usted pueda alimentar es un intervalo en el momento de la suscripción, y el suyo debe ser dinámico).
Configure las variables de alcance del componente para que contengan marcas de tiempo anteriores, como
private prevTime: number; private intervalLimit: number = 4000;Suponiendo que data$ es su flujo de datos de posición del plano de entrada:
data$.pipe(filter(data => { const now: number = Date.now(); const diff = now - this.prevTime; if (this.isLiveMovementEnabled) { // no throttle - pass every update, but prepare for disabling too // record when we last allowed an update & allow the update this.prevTime = now; return true; } else if (diff > intervalLimit) { // we are throttling results, but this one gets through! this.prevTime = now; return true; } else { // we're throttling, and we're in the throttle period. eat the result! return false; } }Algo así le da control total sobre la lógica utilizada cada vez que ingresan los datos. Puede agregar otras operaciones como takeUntil y distintingUntilChanges en la canalización y confiar en que cuando se suscriba, recibirá actualizaciones cuando las desee.
Incluso puede ajustar el límite de intervalo para ajustar dinámicamente el período de aceleración sobre la marcha.