如何在 AngularJS 中超时或延迟工作

Question

I'm a complete noob when it comes to AngularJS. I need some help getting a message to show for a period of time and then go away.

The following code writes a judge's score to a database and then prevents that judge from scoring again until the score has been cleared from the database. I want a message to appear below the judge panel when the judge submits their score, something like "OK!". Currently, it shows up when isLoading = true is set but only very briefly because as you can see from the code below it gets turned to false. I need it to turn to false automatically, but only after 3 or so seconds.

async send(): Promise<any> {
try {
  this.isLoading = true;
  const star: { isValid: boolean } = await this.judgeService.submitScoreIsValid(this.id).toPromise();
  if (star.isValid === true) {
    await this.judgeService.write(this.id, {score: this.currentScore}).toPromise();
    this.status = true;
  } else {
    this.status = false;
  }
} catch (e) {
  console.log(e);
} finally {
  this.isLoading = false;
}
}

I want the isLoading to equal true but only for about 3 seconds. How can I do this?

I've tried going:

this.isLoading=true;    
$timeout(function(){ this.isLoading=false; }, 3000);

but it didn't work, it just stays up and doesn't go away after 3sec. Can anyone help?

My frontend is this:

<div *ngIf="isLoading">
     <h5>OK!</h5>
</div>

*edited to reflect changes made by the suggestion of one of the answers below.

Answer 1

First of all, if you have the choice and aren't stuck with updating legacy code, life will be much easier if you work with the new Angular, instead of the old AngularJS. You won't have to worry so much about the digest cycle , and whether or not changes you make to the values of variables are detected by AngularJS.

At any rate, the code you've written tells angular to set isLoading to true after 3 seconds, not for 3 seconds. What you need to do is:

$timeout(function() { this.isLoading = true; });
$timeout(function() { this.isLoading = false; }, 3000);

...that is, first set it to true , then after 3 seconds, set it to false .

Answer 2

you need to do this:

$timeout(() => this.isLoading = false, 3000);

non arrow functions create a new this context, arrow functions will preserve the outer this