javascript - 每 x 次 AngularJS 隐藏和显示 div

Question

我无法隐藏和显示用作应用程序警报的 div。

目前，我正在使用 $interval 使其成为永久隐藏和显示操作，但我期望的结果是 DIV 保持可见 X 次，然后隐藏相同的 X 次。

这是我现在的做法:

   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;
       }
    }

感谢您的帮助。

Answer 1

不确定您想要实现什么，但如果您想显示对话框一段“x”时间，然后隐藏它，则不应同时启动两个间隔。只需等待对话框显示，然后启动计时器以隐藏它。

例如，如果您需要在“100”毫秒后隐藏计时器。

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

另请注意，我在这里使用了 $timeout 指令。它与$interval几乎相同，但只会被调用一次。

how can I make that the time that the div is shown is the same as the time when is hide

这有点棘手，所以让我们使用另一种算法。在那里，我们只有一个 $interval，但保留当前状态 isNotificationActive 并根据此状态显示/隐藏元素。

另请注意，我使用 $interval.cancel 来停止之前启动的间隔(如果有的话)。

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;    
}