I need to do the last action when "takeUntil" worked and then send that data further, but I can't know exactly when takeUntil finished work. Thanks to all.
ngOnInit(): void {
const thumb = document.getElementById("thumb");
const track: HTMLElement = document.getElementById("track");
const activeTrack = document.getElementById("active-track");
const mouseUp = fromEvent(document, "mouseup");
const mouseMove = fromEvent(document, "mousemove").pipe(
map((item) => this.mouseEventToCoordinate(item, track))
);
const activeTrackClick = fromEvent(activeTrack, "click").pipe(
map((item) => this.mouseEventToCoordinate(item, track))
);
const trackClick = fromEvent(track, "click").pipe(
map((item) => this.mouseEventToCoordinate(item, track))
);
const mouseDown = fromEvent(thumb, "mousedown");
mouseDown
.pipe(
switchMap(() => mouseMove),
merge(trackClick, activeTrackClick),
takeUntil(mouseUp),
repeat()
)
.subscribe((item: { trackWidth: number; position: number }) => {
const newX = (item.position / item.trackWidth) * 100;
activeTrack.style.width = (newX + 1).toString() + "%";
thumb.style.left = newX.toString() + "%";
if (item === "Done") {
// Do somethings
}
});
}
takeUntil
completes the source Observable up until that. This means that we can utilize completion. repeat
starts again completed Observable. So we can do something like so:
mouseDown
.pipe(
switchMap(() => mouseMove),
merge(trackClick, activeTrackClick),
takeUntil(mouseUp),
tap({ complete: () => doSomething() }), // This will execute when mouseUp emits and takeUntil completes source Observable
repeat(),
)
...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.