Tengo problemas para ocultar y mostrar un div que funciona como una alerta para mi aplicación.

Actualmente estoy usando el intervalo $ para hacer de esto una acción permanente de ocultar y mostrar, pero el resultado que espero es que el DIV permanezca visible X tiempo y luego se oculte el mismo X tiempo.

Así es como lo estoy haciendo ahora:

   function showNotification(idNotification) {
       $('[id*=noti_]').addClass('dis_none');
       $('#noti_' + idNotification).removeClass('dis_none');
   }

   function hideNotification() {
       // $('#noti_' + idNotification).addClass('dis_none');
       $('[id*=noti_]').addClass('dis_none');
   }

   function checkCalendar() {
       var tomorrow = moment().add(1, "d").format("YYYY-MM-DD");
       WebApiFactory.GetShiftPeriod("BodyShop", "2017-11-07").then(function (data) {
           // WebApiFactory.GetShiftPeriod("BodyShop", tomorrow).then(function (data) {
           if(data[0].TargetPlantValue === 0){
               showNotification("alert");
           }
       });
   }

   function notifications(type, time) {
       switch (type) {
           case "calendar":
               // checkCalendar();
               $interval(function () {
                   checkCalendar();
                   console.log("Active");
               },time * 1000);
               $interval(function () {
                   hideNotification();
                   console.log("Hide");
               }, time * 1001);


               break;
       }
    }

Gracias por la ayuda.

0
Mauricio Andrés 3 nov. 2017 a las 18:08

2 respuestas

La mejor respuesta

No estoy seguro de lo que está tratando de lograr, pero si desea mostrar el cuadro de diálogo durante un tiempo 'x' y luego ocultarlo, no debe iniciar ambos intervalos al mismo tiempo. Solo espere cuando se muestre el diálogo y luego inicie un temporizador para ocultarlo.

Por ejemplo, si necesita ocultar el temporizador después de '100' ms.

function notifications(type, time) {
     switch (type) {
         case "calendar":
              $interval(function () {
                   checkCalendar();
                   $timeout(hideNotification, 100);
              }, time * 1000);
         break;
     }
}

También tenga en cuenta que usé una directiva $timeout aquí. Es casi lo mismo que $interval pero se invocará solo una vez.

¿Cómo puedo hacer que la hora en que se muestra el div sea la misma que la hora en que se oculta?

Es un poco más complicado, así que usemos otro algoritmo. Allí solo tenemos un intervalo $ único, pero mantenemos un estado actual isNotificationActive y mostramos / ocultamos el elemento de acuerdo con este estado.

También tenga en cuenta que utilizo $interval.cancel para detener un intervalo de lanzamiento anterior, si tiene uno.

var notificationInterval = null,
    isNotificationActive = false;

function notifications(type, time) {
     switch (type) {
         case "calendar":
              $interval.cancel(notificationInterval);
              notificationInterval = $interval(updateNotificationState, time * 1000);
         break;
     }
}

function updateNotificationState() {
     if(isNotificationActive) {
         //hide the element here;
     } else {
         //show the element here;
     }
     isNotificationActive = !isNotificationActive;    
}
2
Telman Ahababov 3 nov. 2017 a las 15:55

Yo haría algo como esto ...

Haga que sus elementos de notificación sean "responsables" de ocultarse, de la siguiente manera:

function showNotification(idNotification, hideAfter) {
    var $el = $('#noti_' + idNotification);
    $timeout.cancel($el.data('timoutRef')); // kill latent auto-hide (if scheduled)
    $el.removeClass('dis_none'); // show
    if(hideAfter) {
        // Schedule auto-hide after `hideAfter` milliseconds,
        // and keep a reference to the timeout so it can be cleared.
        $el.data('timoutRef', $timeout(function() {
            $el.addClass('dis_none'); // hide
        }), hideAfter);
    }
}

Ahora ajusta checkCalendar() y notifications()

function checkCalendar() {
    WebApiFactory.GetShiftPeriod("BodyShop", "2017-11-07").then(function (data) {
        if(data[0].TargetPlantValue === 0) {
            // Make sure the value passed below is one half the total cycle time
            showNotification("alert", 1000/2); // show immediately, hide after 1/2 second
        }
    });
}

function notifications(type, time) {
    switch (type) {
        case "calendar":
            // Here, everything can be nice and simple
            $interval(checkCalendar, time * 1000); // total cycle time
        break;
    }
}

Siempre que sus diversos elementos de notificación no intenten ocupar el mismo espacio en pantalla, (probablemente) no tendrá que preocuparse por ocultar otras notificaciones.

Si los elementos de notificación intentan ocupar el mismo lugar, debe considerar reducir su número a solo uno.

0
Roamer-1888 3 nov. 2017 a las 16:25