Angular 使用 setTimeout 会延迟视图更新

Question

Due to the apps database updates being so quick we have added a material progress bar to help with visual cues to indicate that something has happened.

Our logic is that we set the progressbar to a minimum delay of say 500ms. We set the showLoading to start the progressbar and we then perform the task and then call hideLoading to turn off the progressbar. If the minimum delay is surpassed the progressbar stops if not it will wait until the minimum delay time has elapsed and the setTimeout will take care of the stop. To be clear this part is working.

The issue we have is that when we perform the task and we want to update the ui ie. display the results in a table it doesnt update until the setTimeout has completed.

I have put console.log(s) in the appropriate places and the task is running and returning results it is purley the view is not updating.

Loader Service

export class LoaderService {

private _isLoading = false;
private _inProgress = false;
private _delayFinished = false;

private minimumProgressDelay: number = 200;

public get isLoading() {
    return this._isLoading;
}

public showLoading(delay?: number) {
    this._isLoading = true;
    this._inProgress = true;
    this._delayFinished = true;
    delay = delay ? delay : this.minimumProgressDelay;

    setTimeout(() => {
        this._delayFinished = false;
        if (!this._inProgress) {
            this._isLoading = false;
        }
    }, delay);
}

public hideLoading() {
    this._inProgress = false;
    if (!this._delayFinished) {
        this._isLoading = false;
    }
}

}

Progress Bar in Header component

<div *ngIf="showLoading">
  <mat-progress-bar mode="indeterminate"></mat-progress-bar>
</div>

Typical use of the loader

async search(): Promise<void> {
    this.uiService.loader.showLoading(500);

    await this.getResults();

    this.uiService.loader.hideLoading();
}

The getResults function basically does an async httprequest to get the results and then sets the data property for the table.

As previously explained the code all works excpet the update to the table is not updated until the delay is completed. eg. if we set it to 10000ms it does wait until the 10secs to show the results.

Answer 1

Your Loading Service

I'm a little confused about what you are trying to do, but I'll give it my best shot to explain what is going on. You say you don't want the service to wait for 10s before moving on. But you litterally tell your service to timeout for 10s seemingly intentionally making the user wait for no reason.

Did you perhaps mean to use setInterval instead of setTimeout ? In that case you might want to use timer instead, it allows you to set both an initial delay and a interval time . But even then I do not understand your code. It doesn't seem like you are trying to poll to the endpoint of any API of a back end service.

As Drenai points out, and rightly so, it looks like you are trying to create a way to very slowly observe some variable in a service. The way I see it none of the logic in your LoadingService is very useful except for maybe storing a boolean. But, you could just do that in the component itself.

This peace of code already makes it so the application will wait before setting loading back to false, which kind of makes the logic in the service redundant:

await this.getResults();

You could push these booleans to a BehaviorSubject and observe is from anywhere if that is what you are trying to accomplish.

In the service:

export class LoadingService {
  private loadingSubject = new BehaviorSubject(false);

  get loading$() {
    return this.loadingSubject.asObservable();
  }

  showLoading() {
    this.loadingSubject.next(true)
  }

  hideLoading() {
    this.loadingSubject.next(false)
  }
}

To observe the boolean in your component:

ngOnInit() {
  this.loadingService.loading$.subscribe(
    value => {
      this.loading = value
    }
  )
}

I created a Stackblitz to show it just works. Maybe I understood you wrong and you can use this as a startingpoint to create a minimal reproduction of your problem.

Polling

In case you ARE trying to get data from a back end, check this question about polling and using timer to do so.

Resolver Service

In case you wanted to grab data when routing I would advice using a Resolver.

You make a resolver that calls your service:

export class DataResolverService implements Resolve<DataResolved> {
  
  constructor(
    private dataService: DataService
  ) {}

  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): DataResolved | Observable<DataResolved> | Promise<DataResolved> {
    return this.dataService.getData()
    .pipe(
      map(data => ({ data })),
      catchError(error => {
        const message = `Retrieval error: ${error}`
        console.error(message)
        return of({ data: [], error: message } as DataResolved)
      })
    )
  }
}

An example data service:

export class DataService {
  private dataUrl = 'api/data';

  constructor(private http: HttpClient) {}

  getData() {
    return this.http.get<Data[]>(this.dataUrl);
  }
}

Then you add the resolver to your route:

{
  path: '',
  component: SomeComponent,
  resolve: { resolvedData: DataResolverService },
}

In your component you can now either get the resolvedData described above from a router snapshot or you can subscribe to the route's data:

export class SomeComponent implements OnInit {
  data: Data[];

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.data = this.route.snapshot.data['resolvedData'].data;
  }
}

To know when to show a spinner you can now just subscribe to your router's events:

export class AppComponent implements OnInit {
  loading = true;

  constructor(private router: Router) {}

  ngOnInit() {
    this.router.events.subscribe((routerEvent: Event) => {
      this.checkRouterEvent(routerEvent);
    });
  }

  checkRouterEvent(routerEvent: Event): void {
    if (routerEvent instanceof NavigationStart) {
      this.loading = true;
    } else if (
      routerEvent instanceof NavigationEnd ||
      routerEvent instanceof NavigationCancel ||
      routerEvent instanceof NavigationError
    ) {
      this.loading = false;
    }
  }
}

Here's the full example on Stackbitz of this as well.