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

不确定您要实现的目标，但是如果您想要显示某些＆＃39; x＆＃39;时间，然后隐藏它，你不应该同时开始两个间隔。只需在显示对话框时等待，然后启动计时器以隐藏它。

例如，如果您需要在＆＃39; 100＆＃39;之后隐藏计时器。女士。

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

提供各种通知元素不会试图在屏幕上占据相同的房地产，您（可能）不必担心隐藏其他通知。

如果通知元素尝试占用相同的房地产，则需要考虑将其数量减少到一个。

每隔x次隐藏并显示div AngularJS

2 个答案: