What is the best way to execute a function once a timeout is finished? This timeout should be initiated by a click event in Typescript

I need to ensure that 'this.breakCheck();' is called only once after the timeout is complete, not with every iteration. Right now I have it set up to call on each iteration, which works but is not ideal.

public startBreak(){
  for(let i = this.breakSeconds; i > 0; i--){
    this.$timeout(() =>{ this.breakSeconds -= 1; this.breakCheck();}, 1000 * i);
    }
}

In a previous version, I had the function structured like this:

public startBreak(){
for(let i = this.breakSeconds; i > 0; i--){
 this.$timeout(() =>{ this.breakSeconds -= 1;}, 1000 * i);
}
 this.breakCheck();
}

The issue with the earlier setup was that 'startBreak()' was being triggered immediately by a click event before the timeout completed.

Appreciate any help or suggestions, thank you!

Answer №1

Specifications:

  • breakCheck is invoked only once
  • It is called only after breakSeconds

Simple Implementation:

function startBreak(){
    setTimeout(()=>this.breakCheck(), this.breakSeconds * 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

Issue with TypeScript: "Cannot find name" error encountered during yarn build

I'm encountering an issue with my .tsx component code below: const Header = ({ dict: map, lang: string }) => { return ( <header className="flex items-center justify-between py-10"> <div> <Link href={`/${ ...

An error of type TypeError has been encountered due to an invalid argument type. This occurred in the file located at {mypath}Desktop eddit ode_modules@redisclientdistlibclientRESP2encoder.js on line

Currently, I am diving into Ben's TypeScript GraphQL Redis tutorial for the first time. As a newcomer to TypeScript, I decided to give Redis a shot. However, when I added the property req.session.userId= user.id;, things took a turn. An error popped ...

The API response is indicating that it is empty, however, upon further examination, it is not

I created an API that shows a user's followers and following users. Everything is displaying correctly on the screen. However, when I try to use console.log() to display the array it is stored in after calling the method, it shows as an empty array. I ...

Using Type TTextKey to access TOption is not allowed

I'm struggling to understand why there is a complaint about return option[optionTextKey] with the error message: Type TTextKey cannot be used to index type TOption Here's the code snippet causing the issue: type Props< TTextKey, TOpti ...

Canceling a promise in a Vuex action

I am looking to implement the ability to cancel a running promise in my Vue component, specifically a promise returned by a Vuex action. In my scenario, the Vuex action is continuously polling an endpoint for status updates, and I need the capability to s ...

Next.js focuses solely on rendering markup and does not run any custom code

I am in the process of creating a website, where currently the only functionality available is to change themes by selecting an option from a dropdown menu (the theme is an attribute that uses CSS variables). Everything was functioning properly, however t ...

Passing a variable from the second child component to its parent using Angular

Need help with passing variables between two child components Parent Component: deposit.component.html <div> <app-new-or-update-deposit [(isOpenedModal)]="isOpenedModal"></app-new-or-update-deposit> </div> Deposit Component ...

The value of Angular Input remains unchanged within a FormArray

I am experiencing an issue with the Sequence No in my PreprocessingForm's FormArray. When I add a new row, the Sequence No does not change as expected. <tr class="mat-row" *ngFor="let dynamic of PreprocessingForm.controls.arithmeticI ...

Upgrade the current version of Angular2 PrimeNG from 1.1.4 to the latest version available

As a newcomer to angular2, I am looking for guidance on how to update my current version (1.1.4) to the latest one! Currently, I am using version 2.0.0-rc.5 of Angular2. I have attempted to update by running: npm install primeng --save However, despite ...

Error message for react-native useRoute hook: Property '.....' is not found within the object type

Currently in my expo app, I am utilizing the useRoute() hook within a functional component from react-navigation while also incorporating typescript. The specific route I am attempting to navigate to only requires one parameter: identificationUrl Howeve ...

The ng2-intl encounters an issue when trying to resolve symbol values statically

I'm struggling with a common issue and can't seem to find a solution that works. My setup involves Angular 4.2.6 along with ng2-intl 2.0.0-rc.3. Despite trying the following code, I am still facing issues: export function intlFactory(http:Http ...

Stop certain sections of Typescript code from being compiled

In my scenario, I have two classes: class A and class B. Class B extends class A. The issue arises when we consider a method in both classes. Class A has a method that accepts AProperties enum as its first argument. However, class B has a similar method th ...

While not all attributes of the response object are null, there are certain object attributes that are displayed as null

My component is responsible for displaying data in a table that is fetched from Firestore. Although the data retrieved is complete, I am noticing that the settings attribute is often null when accessed in JSX. Occasionally, I do see the correct output, but ...

Problem with (click) event not triggering in innerHtml content in Angular 4

For some reason, my function isn't triggered when I click the <a... tag. Inside my component, I have the following code: public htmlstr: string; public idUser:number; this.idUser = 1; this.htmlstr = `<a (click)="delete(idUser)">${idUser}&l ...

Transmitting a base64 data URL through the Next.js API route has proven to be a challenge, but fortunately, other forms of

It's frustrating me to no end. I've successfully done this before without any problems, but now it just won't cooperate. Everything works fine when passing an empty array, a string, or a number. However, as soon as I include the data URL, t ...

"Utilizing the Power of Typescript with Koa-Router and Passport for a

As a beginner in Typescript, I am facing challenges while trying to integrate koa-router and koa-passport. I have installed all the necessary @types\ packages. import Koa from "koa"; import Route from "koa-router"; import passport from "koa-passport" ...

Clearly defining the data types for static dictionary values, while also deducing the precise structure or at least the keys

My goal is to create a static dictionary that is defined as a single object literal. I want to: Specify the type of values explicitly for typechecks and IDE suggestions Still have the ability to infer the exact shape, or at least keys I can achieve the f ...

Angular Dialog "Popup" for Updating Information

Currently, I am in the process of developing a "config" page where users can add objects/devices. When a user adds an object, it opens a Dialog window displaying the properties/fields of that particular object. The window includes Save and Cancel buttons. ...

Adding styles to specific child nodes within a p-tree component in PrimeNG

Starting off with a demonstration example: Check out this StackBlitz for primeng p-tree. I am utilizing primeng to construct a structure for polls and answers using p-tree. The hierarchy is as follows: Participants --> Polls --> Questions --& ...

Typescript - The generic type variable 'T' cannot be assigned to the type 'T'. There are two distinct types with the same name, but they are not related to each other

Exploring the power of TypeScript 3.0 and above, let's take a look at a simple setup involving generic typed variables: abstract class BaseClass { public abstract merge<T>(model?: T): T; } class MyClass extends BaseClass { public Value: s ...