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

Conquering cross-origin resource sharing (CORS) using XMLHttpRequest without relying on JSONP

Appreciate your time in reading this inquiry! For the past few days, I've been grappling with an AJAX request issue. Despite scouring through numerous answers on Stack Overflow, I'm still unable to find a resolution. Any assistance would be grea ...

Guide to navigating to a specific module within an Angular 2 application directly from the index page

As a newcomer to angular2, I recently obtained a sample login and registration code online. However, when I run the code, it displays the index page instead of the "login" module located within the app folder. Can someone please advise me on how to redire ...

The module named "jquery" has not been loaded in this context: _. Please use require() to load it

As I work on migrating my Javascript files to Typescript, I encountered an issue when trying to use the transpiled javascript file in an HTML page. The error message I received is as follows: https://requirejs.org/docs/errors.html#notloaded at makeError (r ...

Exchange selection choices among harvested selected boxes

In my project, I am working on swapping all the options between two select boxes. The specific scenario I am dealing with involves recording details of phone calls. These calls can either be inbound or outbound. For outbound calls, I have a 'caller&ap ...

Exploring the depths of Angular2 RC6: Implementing nested modules and routing

Within my application, I have a module called SupportModule which consists of 3 sub-modules: AdminModule, ChatModule, and ContactModule. Each of these modules has its own defined routing structure. The overall structure resembles something like this: htt ...

I am experiencing issues with my Jest unit test case for Material UI's multi select component failing

I've been working on writing a unit test case for the material UI multi select component. The code for the parent component is as follows: import {myData} from '../constant'; export const Parent = () => { const onChangeStatus= (sel ...

Even after ensuring the proper type checking, I am still receiving the error message "Property 'message' does not exist on type 'object'"

I have the following code snippet: try { // api call } catch (error) { if (typeof error === 'object' && error !== null && 'message' in error) { if (typeof error.message === 'string') { if (error.me ...

Having trouble accessing properties that are undefined while using react JS, specifically when trying to read a 'map' property

Currently, I am in the process of building a blog with ReactJS and NextJS within VS Code. Despite not encountering any errors during coding, when I attempt to run it, the browser displays: "TypeError: Cannot read properties of undefined (reading 'map& ...

Attempting to design a customized tooltip for an SVG element embedded within the HTML code

Recently, I've delved into Js with the goal of creating an interactive pronunciation guide using inline svg. If you're curious to see what I've done so far, check it out here. My current focus is on incorporating basic styled tooltips that ...

A guide to removing functions from the render method

Greetings! Currently, I am in the process of creating a simple webpage that utilizes a map function to display all details to the user. Some fellow developers have advised me to remove my functions from the render method, as it continuously renders unneces ...

Errors in the Latest Release of Angular2 and Visual Studio 2015

After taking a stroll through the Angular 2 Tour of Heroes sample application with the latest Angular 2 version, I decided to host it within a Visual Studio 2015 Empty Web application. Following the Angular sample closely means that I'm not incorporat ...

Squashing the `require()` method in nwJS using emberJS

I am facing an issue with my nwjs application that connects to a web address hosting an ember application. I need to access the node context within the ember application to determine the user's operating system for updating purposes. I attempted to do ...

Adding HTML content inside an iFrame at a specific cursor position in Internet Explorer

Does anyone know a method to insert HTML into an iFrame specifically for IE? I have been using execCommand insertHtml in Chrome and Firefox, but it doesn't seem to work in IE. I was able to paste HTML into a content editable div using pasteHTML, howe ...

Utilize JavaScript declarations on dynamically added strings during Ajax loading

Is there a way to append HTML strings to the page while ensuring that JavaScript functions and definitions are applied correctly? I have encountered a confusing issue where I have multiple HTML elements that need to be interpreted by JavaScript. Take, for ...

Using the express.Router instance for handling errors can be a useful tool in your development

Based on the documentation, it states that any nodejs express middleware function has the capability of being swapped out by App or Router instances: Given that router and app adhere to the middleware interface, they can be used just like any other midd ...

Sending JSON data from Angular to WCF

Attempting to utilize the post method in Angular to send JSON data to a WCF service. The data is being sent in JSON format from Angular, however, the WCF service is receiving it as a null object. Is it possible to use the get method to send JSON data? Th ...

Implementing Angular Universal on Azure Platform

After converting my application to Angular Universal at the request of my clients, I successfully ran it using npm run serve:ssr and accessed it through http://localhost:4000. Now, the challenge lies in deploying it. Upon running npm run build:ssr, a dist ...

I am experiencing a JSON parse error while making an AJAX request after upgrading to Codeigniter 3.x. What could be the reason behind this

I am currently in the process of updating my Codeigniter framework from version 2.2.6 to 3.0.6, and unfortunately, this update has caused some previously working code to break. One specific error that I am encountering is "SyntaxError: JSON.parse: unexpect ...

stopping action when hovering

Looking for some assistance with my javascript function that scrolls through an array of images on a set interval. I want to enhance it by pausing the rotation when hovering over any of the images. Javascript (function() { var rotator = document.getE ...

When defining a stripe in TypeScript using process.env.STRIPE_SECRET_KEY, an error of "string | undefined" is encountered

Every time I attempt to create a new stripe object, I encounter the error message "Argument of type 'string | undefined' is not assignable to parameter of type 'string'. Type 'undefined' is not assignable to type 'string& ...