Avoid subscribing to the Observable fromEvent in certain conditions

I need to implement a functionality to skip or ignore the subscription on the fromEvent() observable when a specific condition is met: if

this.currentPosition === this.vc.getScrollPosition()[1]
, I do not want to subscribe to the observable. This is because the scroll action is automatically moving to the next item, and my intention is to wait for user interaction before scrolling to the next item on the interface.

fromEvent(window, 'scroll').pipe(
    distinctUntilChanged(),
    debounceTime(1000)
)
    .subscribe(
        (event) => {

            const current = this.positions.find(e => e.name === this.currentSectionName);
            const indexOfCurrent = this.positions.indexOf(current);

            if (indexOfCurrent + 1 === this.positions.length) {
                // remain in the same position if it's the last item
                this.vc.scrollToPosition([0, current.position]);
                this.currentPosition = current.position;

            } else {
                // move to the next position if it's not the last item
                const next = this.positions[indexOfCurrent + 1];
                this.vc.scrollToPosition([0, next.position]);
                this.currentPosition = next.position;
            }
        }

    );

Answer №1

Filtering can be done through piping.

fromEvent(window, 'scroll').pipe(
    filter( () => this.currentPosition !== this.vc.getScrollPosition()[1] ),
    distinctUntilChanged(),
    debounceTime(1000)
)

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

Bringing in a created class establishes the universal prototype

When working with the given react component, I noticed something interesting. Even after importing it into multiple components and calling the increment method, it seems to manipulate the same instance rather than creating separate instances. This behavior ...

For each variable, assign a value

Apologies if this question has been asked before, but I'm encountering an issue with a foreach loop in JavaScript. let fields = temp_deviceAllocation.devices.forEach(async (device) => { const fields = await device_model .findOne({ dev ...

Selecting a GoJS Node using keys

In Angular with TypeScript, what is the best way to select a node from a diagram based on its key? Currently, I am required to left-click a newly created node in order to select it, but I would like for it to be automatically selected upon creation. I ha ...

Issue with rendering classes in Next.js: Why is a class being inadvertently applied to a different element?

When one element should be displayed while the other should not, they are given classes based on their relationship with each other. View code There is a login button component with a border gradient, along with an avatar component. Login button componen ...

Extract specific data from JSON objects

I have a JSON string that I need to parse on the client side in order to extract data for three different column names (MAT_ETHNICITY, PAT_ETHNICITY, SEX). My goal is to populate drop down lists with the values. Should I handle this by making three separ ...

Pressing a button on a webpage using JavaScript with Selenium and Python

As I work on my code, I find myself in a situation where I need to access a webpage and click on a button labeled "Physician Program" in the menu list. This action directs me to a new page if done manually on the browser. However, there is no href attribu ...

Autocomplete Dropdown failing to select default value when defaultValue option is set

stateNPAValue[formData.state.vale] = 0: "All",1: "959", 2: "203",3: "860", 4: "475" // API response for NPA data const [selectedNamesState, setSelectedNamesState] = useState([]); const transformedNpaData ...

TypeORM is unable to locate the default connection within a class

I have encountered an issue while trying to incorporate TypeORM within a class. It seems to be unable to locate the default connection despite awaiting the connection. I have double-checked the configuration and tested it with .then(), which did work succe ...

Tips for coordinating external asynchronous JavaScript retrieval

Within my app.js file, I have the following code snippet: load(src) { var script = document.createElement('script'); script.src = src; script.async = true; document.head.appendChild(script); } for (var i=0; scripts.length; i++) { loa ...

Ensure the browser stays anchored at the bottom of the page while employing jQuery to reveal a div

This piece of code allows me to toggle the visibility of a div: <a href="#" class="show_hide">Show/hide</a> <div class="slidingDiv"> My content...... <a href="#" class="show_hide">hide</a></div> <script src="http:// ...

How can I send a variable to a PHP page with AJAX using jQuery?

index.html <?php while($admin_data=mysql_fetch_row($query2)){ ?> <tr> <td><?php echo $admin_data[0];?></td> <td><?php echo $admin_data[1];?></td> <td><?php echo $admin_data[2];?></td> & ...

reconfigure form credentials with JavaScript

I am currently working on a form that includes a textbox and a button for submitting data using ajax. <input type="password" id="password" /> <button id="addaccount" onclick="showload();">Add</button> When the user clicks on the button, ...

Adjust the color of a contenteditable div once the value matches

I currently have a table with some contenteditable divs: <div contenteditable="true" class="change"> This particular JavaScript code is responsible for changing the color of these divs based on their content when the page loads. However, I am now ...

The behavior of Quasar's q-drawer is quite unpredictable

Having made the transition from Vue.js 2 with Vuetify to Vue.js 3 with Quasar due to Vuetify not officially supporting Vue.js 3 yet, I am utilizing q-drawer and its mini property. This allows me to toggle between the mini state and the normal expanded stat ...

Enhancing view with Typescript progressions

My current view only displays a loader.gif and a message to the user. I am looking to enhance the user experience by adding a progress indicator, such as "Processing 1 of 50", during the data update process. The ts class interacts with a data service layer ...

retrieve information provided by the user

When a user inputs a date into #dateUserInput and clicks the button, I want the fetch function to retrieve the appropriate image for that date. However, an error occurs: VM113:1 Uncaught (in promise) SyntaxError: Unexpected end of JSON input at getimag ...

Is the JSON returned by the API server not being properly processed by the RequireJS module, resulting

After extensive research on promises and module creation, I am still unable to understand why my current setup is not functioning properly. My goal is to write a script that takes a username and then fetches user data from a 3rd party API using a separate ...

When the input tag is set to null, the array that holds e.target.files will be devoid of any content

Hey there, I'm currently in the process of uploading a folder. However, I encountered an issue when trying to upload the same folder again. It seems that the data was empty when I attempted to set it to null. const uploadFolders = []; let uploadFolder ...

Obtaining the attribute value from a custom tag in Angular: A comprehensive guide

I am currently working on creating a customized password component in Angular5. I am having difficulty obtaining the minimum and maximum attribute values required to validate the password. I attempted to retrieve the values using JavaScript's getAttr ...

What is the best way to create a function that triggers another function every minute?

Currently, I have a function that checks if a user is authenticated: isAuthenticated = (): boolean => { xxx }; I am working with AngularJS and I want to create a new function called keepCheckingAuthentication() This new function should call the ...