每x次隱藏和顯示div AngularJS

Question

我在隱藏和顯示div時遇到麻煩，該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幾乎相同，但是只會被調用一次。

我怎樣才能使顯示div的時間與隱藏時的時間相同

這有點棘手，所以讓我們使用另一種算法。 那里我們只有一個$ 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;    
}

Answer 2

我會做這樣的事情...

使您的通知元素“負責任”隱藏自己，如下所示：

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

現在調整checkCalendar()和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;
    }
}

提供各種通知元素不會嘗試在屏幕上占用相同的房地產，您（可能）無需擔心隱藏其他通知。

如果通知元素確實嘗試占用相同的房地產，則需要考慮將其數量減少為一個。