The counterpart of the RxJS setTimeout operator

Question

The counterpart of the RxJS setTimeout operator

Looking for a RxJS operator alternative to set/clearTimeout in these circumstances:

this.mouseEnterSubscription = this.mouseEnterStream
  .subscribe(() => {
    this.timeout = setTimeout(() => {
      void this.playVideo();
    }, 500)
});

this.mouseLeaveSubscription = this.mouseLeaveStream.subscribe(() => {
  this.pauseVideo();
  clearTimeout(this.timeout);
});

javascript typescript rxjs settimeout

Answer 1

Answer №1

Utilize debounceTime to postpone emission until a specified time has elapsed without receiving a new emission, and employ takeUntil to conclude an observable when another observable emits a value:

const mouseEnterSubscription = mouseEnterStream.pipe(
  debounceTime(500),
  takeUntil(mouseLeaveStream),
  repeat(),
).subscribe(
  () => playVideo()
);

In this code snippet, we delay emitting for 500ms but will exit if the mouseLeaveStream emits first. The use of takeUntil ensures that your mouseLeaveSubscription does not need to handle any cleanup tasks. We utilize repeat to "restart" the completed source (otherwise it would only emit once).

const mouseLeaveSubscription = mouseLeaveStream.subscribe(
  () => pauseVideo()
);

For reference, here is a StackBlitz example.

Answer 2

Utilize debounceTime to postpone emission until a specified time has elapsed without receiving a new emission, and employ takeUntil to conclude an observable when another observable emits a value:

const mouseEnterSubscription = mouseEnterStream.pipe(
  debounceTime(500),
  takeUntil(mouseLeaveStream),
  repeat(),
).subscribe(
  () => playVideo()
);

In this code snippet, we delay emitting for 500ms but will exit if the mouseLeaveStream emits first. The use of takeUntil ensures that your mouseLeaveSubscription does not need to handle any cleanup tasks. We utilize repeat to "restart" the completed source (otherwise it would only emit once).

const mouseLeaveSubscription = mouseLeaveStream.subscribe(
  () => pauseVideo()
);

For reference, here is a StackBlitz example.

The counterpart of the RxJS setTimeout operator

Answer №1

Similar questions

Is there a way to obtain an array after subscribing to an RxJS method?

Encountering a problem when looping through a JSON response

Refresh Google Maps without showing gray areas on the screen

The communication between the Next.js and Node.js servers is being obstructed as the request body fails

Using onchange within an onchange event will not function as intended

What is the best way to close an ajax page within the main page using a button?

Loading information in a directive by utilizing promises in a service with AngularJS

HTML template failing to retrieve data from Angular dataSource

Tips on connecting the endpoints of two parallel quadratic Bezier curves that both begin with a MoveTo command

Removing data based on various criteria in Prisma

Is there a user-friendly interface in Typescript for basic dictionaries?

Prompting the website to 'refresh' and return to the beginning of the page

Is it feasible to relocate an embedded swf file from one tag to another?

Keep your filter content up-to-date with real-time updates in Vue.js

The module cannot be located, despite my efforts to reinstall and verify all addresses, the error still persists

Tips for creating basic Jasmine and Karma tests for an Angular application to add an object to an array of objects

What could be causing this error to appear when using Next.js middleware?

No Backend Detected for Tensorflow.js in Node

I am searching for a Nodejs library that has the ability to serialize and deserialize paths composed of named components, such as URL pathnames. Can

Bring in a JavaScript file to a Read-Evaluate-Print-Loop (