es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Cómo solucionar el parpadeo de mi página Angular en cada llamada de rest en setTimeout().

Cómo solucionar el parpadeo de mi página Angular en cada llamada de rest en setTimeout().

24 Jul, 2023 Programación

He revisado numerosas preguntas en StackOverflow y no he encontrado una solución para la forma en que estoy intentando lograr las cosas.

Por favor, ten paciencia conmigo ya que soy un principiante en Angular 7.
Lo que he hecho es llamar a un método y he utilizado un temporizador de tal manera que el método se llamará recursivamente cada 4 segundos durante 1 minuto si la respuesta de la llamada de suscripción REST es falsa. Si es verdadera, redirigiré a otra página de Angular.

El problema al que me enfrento es que cada 4 segundos mi página/aplicación parpadea durante 1 minuto.

He reducido el parpadeo a la llamada de suscripción REST, es decir:

this.AnythingService.isFileCheckoutValid(this.number).subscribe(
  (res) => {...}
);

que estoy haciendo cada vez para comprobar si la respuesta es verdadera o falsa. Si la respuesta es falsa, vuelvo a llamar al método checkFileAndRedirect(time) de forma recursiva con el tiempo incrementado, una vez que haya pasado 1 minuto, se detendrán las llamadas recursivas y se mostrará un mensaje de error.

Esta es mi llamada al método:

this.checkFileAndRedirect(1)

Este es el cuerpo del método:

checkFileAndRedirect(time: number) {
  setTimeout(() => {
    this.AnythingService.isFileCheckoutValid(this.number).subscribe(
      (res) => {
        if (res.isFileCheckoutValid) {
          this.router.navigate(["/functional/" + this.number]);
          return;
        }
        time++;
        if (time < 15) {
          this.checkFileAndRedirect(time);
        } else {
          this.toastr.error('Error', "No se puede crear y revisar una plantilla en blanco");
          this.router.navigate(["/functional/" + this.number]);
          return;
        }
      }
    );
  }, 4000);
}

Por favor, ayúdame a solucionar el parpadeo debido a la llamada de suscripción y su respuesta, tu ayuda es muy apreciada.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Estimado colega desarrollador,

    Gracias por comunicarte con respecto a tu problema con el parpadeo causado por una llamada recursiva de suscripción REST en Angular 7.

    Según tu código de ejemplo, parece que el parpadeo se debe al hecho de que el método this.AnythingService.isFileCheckoutValid se está llamando cada 4 segundos de forma recursiva hasta que la respuesta sea verdadera, lo que podría generar una cantidad significativa de solicitudes HTTP al servidor y provocar el parpadeo.

    Para abordar este problema, te sugiero que en lugar de llamar al método de forma recursiva, utilices la función interval incorporada proporcionada por la biblioteca RxJS para llamar al método en intervalos establecidos hasta que la respuesta sea verdadera. Esto proporcionaría una solución mucho más limpia y eficiente, que debería eliminar el parpadeo.

    Aquí tienes cómo se vería el código con la función interval:

    import { interval } from 'rxjs';

checkFileAndRedirect(): void {
  const subscription = interval(4000)
    .subscribe(() => {
      this.AnythingService.isFileCheckoutValid(this.number)
        .subscribe((res) => {
          if (res.isFileCheckoutValid) {
            this.router.navigate(['/functional/' + this.number]);
            subscription.unsubscribe();
          } else {
            const time = subscription.getExecution();
            if (time >= 15) {
              this.toastr.error('Error', 'No se puede crear y seleccionar una plantilla en blanco');
              this.router.navigate(['/functional/' + this.number]);
              subscription.unsubscribe();
            }
          }
        });
    });
}

    En el nuevo código, la función interval se utiliza para llamar al método this.AnythingService.isFileCheckoutValid cada 4 segundos hasta que la respuesta sea verdadera. Una vez que la respuesta es verdadera, se cancela la suscripción al interval y el enrutador se dirige a la nueva página.

    Si la respuesta es falsa después de 15 ejecuciones del intervalo, se muestra un mensaje de error “toastr” y se cancela la suscripción, y el enrutador se dirige a la nueva página.

    Espero que esta solución ayude a resolver tu problema con el parpadeo.

    Saludos cordiales,
    Un experto en IT

Comments are closed.