When utilizing Rx.Observable with the pausable feature, the subscribe function is not executed

Note: In my current project, I am utilizing TypeScript along with RxJS version 2.5.3.

My objective is to track idle click times on a screen for a duration of 5 seconds.

var noClickStream = Rx.Observable.fromEvent<MouseEvent>($window.document, 'click')
                .bufferWithTime(5000)
                .filter(eventBundle => {
                    return eventBundle.length === 0;
                });

This code successfully executes. The subscriber is triggered when there are no clicks within the specified time frame.

Now, I want the ability to pause and resume the noClickStream inside the subscribe function when displaying a warning screen. To achieve this, I included the pausable() method to the original no click stream.

var noClickStream = Rx.Observable.fromEvent<MouseEvent>($window.document, 'click')
            .bufferWithTime(5000)
            .filter(eventBundle => {
                return eventBundle.length === 0;
            })
            .pausable();

However, after implementing the pause functionality, the noClickStreamSubscriber function does not get invoked even if there are no clicks for 5 seconds. Is it possible that fromEvent does not support the pausable feature?

Answer №1

The issue with the subscribe function not running when the observable is set as pausable is due to the fact that the event stream begins in a paused state. In order to activate the stream, you need to call noClickStream.resume() after defining the subscribe function.

var noClickStream = Rx.Observable.fromEvent<MouseEvent>($window.document, 'click')
            .bufferWithTime(5000)
            .filter(eventBundle => {
                return eventBundle.length === 0;
            })
            .pausable();

var noClickStreamSubscriber = noClickStream.subscribeOnNext(() => {                                   
                this.showLogoutWarning = true;
});

noClickStream.resume(); // Remember to make this call

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the most effective method for utilizing v-model with a pre-populated form in Vue.js?

Need some help with a form and looping through items in a module to generate textfields. Take a look at the photo for context: Link: Currently, I'm using a structure like this... <v-row class="d-block d-md-flex"> ...

What is the process for "dereferencing" an object?

How can you access the properties of an object returned by a function in JavaScript? For instance: var tmp = getTextProperties(); font = tmp.font; size = tmp.size; color = tmp.color; bold = tmp.bold; italic = tmp.italic; While PHP offers the list ...

Verify if a specific key is present in associative arrays

Can you please explain the correct way to check for the existence of a key in associative arrays? For instance: var mydata = { key1: '', key2: { subkey1: { subkey1_1: { value1: '' ...

Why is my jQuery $.ajax success function not providing any results?

When checking the Network tab in Chrome, I noticed that the correct data (action, username, password) is being sent, but the message is not returning to $('#return_login'). Can anyone spot what might be wrong with my code? Below is the jQuery co ...

List of images using React Native's FlatList

Seeking assistance with integrating images into a flatlist grid. I have successfully implemented text but struggling with images stored in the assets folder. The goal is to display separate images from the assets folder within the boxes of the flatlist gr ...

Achieving selective exclusion of specific keys/values while iterating through an array and rendering them on a table using Angular

Currently facing a hurdle and seeking advice I am developing an angular application that fetches data from an API and presents it on the page The service I am utilizing is named "Api Service" which uses HTTPClient to make API calls apiservice.service.ts ...

Despite my attempts to force a repaint, the progress bar remained static during intensive tasks

My JavaScript method works fine in Chrome, taking about 2000 ms to iterate over ~200 inputs, insert values, and trigger onchange events. However, it's a different story in IE where it takes about 10000 ms. To show the progress of this process, I deci ...

Sending an email through Node.js with SendGrid is not a challenge

I've got this Mailer.js file const sendgrid = require('sendgrid'); const helper = sendgrid.mail; const keys = require('../config/keys'); class Mailer extends helper.Mail { constructor({ subject, recipients ...

Incorporating a particular JavaScript library into Angular 4 (in case the library doesn't have a variable export)

I am attempting to display the difference between two JSON objects in an Angular 4 view. I have been using a library called angular-object-diff, which was originally created for AngularJS. You can view a demo of this library here: Link I have trie ...

What are the disadvantages associated with the different methods of submitting data?

My goal is to create an Online testing platform. I have come across two different approaches to verify user-selected answers. Approach 1 <div class="qContainer" index="0"> Who holds the record for scoring 100 centuries in International cricke ...

provide the key and id to a node.js module

Currently, I am utilizing the Express framework to establish a module for handling requests to a third-party API. This particular API necessitates an ID and key to be transmitted. Rather than embedding these credentials directly into the module, I prefer ...

Utilizing Prototype in Node.js Modules

Currently, I am working on a project involving multiple vendor-specific files in node. These files all follow a similar controller pattern, so it would be more efficient for me to extract them and consolidate them into a single common file. If you're ...

Clearing the ng-model value in a controller following an ng-change event

Is there a way to reset the ng-model value in the controller after an ngChange event without needing to use a directive? <div ng-repeat="i in items"> <!-- Some DOM comes here --> <select ng-model="i.avail" ng-change="changeAvail(i. ...

Utilizing Typescript within Visual Studio Code alongside node_modules

I currently have typescript installed and am utilizing the powerful visual code editor. Whenever I attempt to navigate to the definition of a typescript function in the node_modules directory, Visual Studio Code ends up expanding the entire 'node_mod ...

Prevent the risk of revealing your LinkedIn API key within HTML code

For my website, I am looking to incorporate the Sign In With LinkedIn feature for user logins. The initial example snippet provided in the LinkedIn API docs is as follows: <script type="text/javascript" src="//platform.linkedin.com/in.js"> api_k ...

Transition from traditional class-based components to functional components

I am utilizing the ref from the parent class to access the child class. However, in this scenario, I want to access the child functional component from the parent class. In the parent class: class Waveform extends Component { constructor(props){ s ...

Ways to Execute the Constructor or ngOnInit Multiple Times

Here's the scenario I'm facing: I have developed an app with multiple screens. One of these screens displays a list of articles. When a user clicks on an article, they are directed to another screen that shows the details of that specific item. ...

I'm having trouble establishing a connection with the Appwrite platform

Encountered an issue while trying to connect to appwrite. The specific error message is: Uncaught (in promise) TypeError: Failed to construct 'URL': Invalid URL at Account.<anonymous> (appwrite.js?v=d683b3eb:932:19) at Generator.nex ...

When implementing Angular 6, using a shared module within individual lazy-loaded modules can lead to a malfunctioning app when changes are

Hey there, I've encountered a strange problem that didn't occur when I was using Angular 5. Let me explain the situation: In my App routing module, I have: { path: 'moduleA', pathMatch: 'full', loadChildren: &ap ...

Guide to importing a JSON file into Vue.js and HTML

I'm a beginner in Vue and not very familiar with HTML I'm attempting to import data from a JSON file into my interface to display it for the user. Below is the structure of the JSON: [ { "Title": "SOFT-STARTER", "Cod&q ...