Adjusting the timeout for a particular operation according to its unique identifier

I am looking for a solution to call a method that posts an answer after an input change in my Angular project. I want to reset the timeout if another input change occurs to avoid multiple posts. Is there a smart way to achieve this?

My project involves posting answers for various questions so it is crucial that the code does not cancel the wrong timeout.

var calls = {};
function postAnswer(answer) {
    if(calls[answer.id]) {
        clearTimeout(calls[answer.id]);
        console.log('cleared ' + answer.id);
    }
    calls[answer.id] = setTimeout(() => {
        console.log("posted " + answer.id)
        delete calls[answer.id];
    }, 2000)
}

I have been exploring different methods and libraries like RxJS, but haven't found a suitable one yet. Any suggestions would be greatly appreciated.

Answer №1

Utilizing debouncing is crucial in this scenario. The debounce operator in rxJs can be effectively used for the same purpose in Angular. By utilizing debounceTime(2000), events will only be triggered after the user has stopped typing for 2000 milliseconds. For further guidance, you can refer to this link on StackBlitz: DebounceDemo.

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

Say goodbye to using 'jQuery .load()' with <img> elements inside <a> tags

I have a static HTML page and some other files with the same structure but different content. <div id="textRed" class="scrollbar"> <h1>Header</h1> <p>Lorem Ipsum</p> <a href="images/image1.jpg" data-lightbox ...

Is JsonEditor capable of editing JSON Schemas effectively?

For a while now, I have been impressed by the functionality of JSON-editor and have been using it to edit documents based on a specific JSON schema. But why stop there? Many users utilize JSON-Editor to make changes to JSON documents according to the corr ...

What is the best way to send these values to a JavaScript function and show them one by one on an HTML webpage?

There are 100 values stored in the database. https://i.stack.imgur.com/584Op.jpg I need to retrieve these values from the database using PHP and pass them to JavaScript using Ajax. PHP CODE: for($i=0;$i<=9;$i++) { $random = (10 * $i) + rand(1,10); ...

What is the best way to retrieve the Hash value of an object in Typescript?

What is the process for obtaining the hash value of an object in typescript? For instance: let user:any = {name:'tempuser', age:'29'}; let anotheruser:any = {name:'iam', age:'29'}; if( Object.GetHashCode(user) === ...

After logging in, I am unable to redirect to another PHP page as the login form simply reloads on the same page

Lately, I've encountered an issue that has persisted for a few days. The login validation is functioning flawlessly. However, the problem arises when attempting to redirect to another page, specifically 'index.php', after logging in. Instead ...

Discovering the presence of line breaks

I have searched extensively on Google, but I am struggling to find a definitive answer. My goal is to create an email simulation where users can input text into a textarea and save it to the database. They should then be able to return to the page later a ...

Evaluating Angular2 components that have indirect dependencies

Starting with Angular2, I make sure to test each component I create from scratch. When it comes to writing tests for components, I must initialize TestBed to ensure that the component under scrutiny has all its necessary dependencies resolved. Currently, ...

Despite encountering Error 404 with AJAX XHR, the request is successfully reaching the Spring Controller

I am attempting to upload a file with a progress bar feature. var fileInput = document.getElementById('jquery-ajax-single') var form = new FormData(); form.append('uploadFile',fileInput.files[0]); $.ajax({ url: "fi ...

Why isn't my callback working? Can anyone help me figure out what I did wrong?

I'm currently facing an issue while making an asynchronous call to Redis and attempting to utilize a callback to inform async.js about the completion of the query. I am consistently receiving an error message stating "callback is not a function". Can ...

How to open a new window in a separate desktop on macOS using Javascript

I am currently browsing my website on a Mac computer. I am interested in opening a new tab on the second desktop using Mission Control. Is this achievable? If so, could you please guide me on how to do it? After searching extensively online, I have been u ...

Elegant Box 2 - Ascending to the top when clicked

I am excited to share that I am using FancyBox for the first time in my project. This time, I decided to separate the image from the link for a unique user experience. The hover effect works perfectly fine - the issue arises when the link is clicked and th ...

What method is best for deleting an item from the database in HTML structure - POST, GET, or XHR action?

I have a webpage that displays content in a table format and allows users to delete a specific row by clicking on it. The structure of my rows is as follows: foreach ($rewards as $reward) { echo '<tr id="' . $reward[&apos ...

JavaScript - Issue encountered while reaching the bottom of the webpage

While conducting tests using Firebug/Firefox, I am trying to execute a simple command that will scroll the page to the bottom. Here is the command: window.scrollBy(0,3000); Seems straightforward, right? When testing on certain websites like Yahoo.com ...

Utilizing getUserMedia to capture portrait shots with the back camera

I am encountering an issue with starting the back camera in portrait mode using navigator.mediaDevices.getUserMedia in React. The camera does not appear to be taking into account the constraints I have set. Below is how the code looks for initialization: ...

Issue with Primeng table: row grouping width does not work properly when scrollable is enabled

Currently, I am implementing a Primeng table within an Angular project. Below is the code snippet showcasing how the table is being utilized: <p-table [value]="cars" dataKey="brand" [scrollable]="'true'" scrollHeight="400px"> <ng-te ...

Basic animation feature malfunctioning

So, I'm really new to this whole HTML5 canvas thing and I'm trying to make a pixel move across the screen with an additive tail behind it. The idea is for the tail to scroll away once it reaches a certain point while the pixel continues moving. I ...

Utilizing timezones with Moment.js

Currently, I am utilizing momemt.js and moment-timezone.js to present time in the browser. At this time, I have received epoch time from the server which has been converted to central time. My goal now is to exhibit the time in EST/EDT format. To achieve t ...

How can I make v-for display additional profiles to achieve an infinite scroll effect?

Hey there! I've got a Firestore database set up to fetch profiles and display them on a page using v-for. I want to implement infinite scroll for a smoother user experience. Here's the JavaScript composable code I'm working with: import { pr ...

Utilizing jQuery or JavaScript to transfer information within a Bootstrap modal

I am working with a table that is generated from an SQL Table using PHP for data looping. HTML <tbody> <?php $no = 1; foreach($data_request as $data) { ?> <tr> <td class="center"><?php echo $no++.". ";?> ...

Angular to ExpressJS Backend Communication Leads to Unexpected Body Formatting Issues

For the purpose of learning Angular as a frontend and using Express as the backend, I am working on a simple todo list application. The database is managed with Sequelize. When attempting to add a user by posting to the node backend, the resulting object f ...