在特定间隔时间angularjs之后显示超时错误消息

时间:2018-06-20 08:52:17

标签: angularjs settimeout

我正在尝试在特定的空闲时间间隔(例如10分钟)后显示超时错误消息

我点击了以下链接,该链接正常运行。 https://long2know.com/2015/04/user-session-timeout/

var idleService = function ($rootScope, $timeout, $log) {
var idleTimer = null,
    startTimer = function () {
        $log.log('Starting timer');
        idleTimer = $timeout(timerExpiring, 10000);
    },
    stopTimer = function () {
        if (idleTimer) {
            $timeout.cancel(idleTimer);
        }
    },
    resetTimer = function () {
        stopTimer();
        startTimer();
    },
    timerExpiring = function () {
        stopTimer();
        $rootScope.$broadcast('sessionExpiring');
        $log.log('Timer expiring ..');
    };

startTimer();

return {
    startTimer: startTimer,
    stopTimer: stopTimer,
    resetTimer: resetTimer
};

};

是否可以在没有$ broadcast和$ on的情况下实现它。有关如何使控制器变量知道超时时间的任何指导,当前可通过服务中的$ broadcast和控制器上的$ on来实现,然后将在$ on函数中修改该变量。

2 个答案:

答案 0 :(得分:0)

您可以使用RxJS创建一个可观察对象。控制器将通过您的服务对其进行订阅,并且当超时到期时,将在您的可观察对象上发出一个值(可能是空值)。这样,每个在该可观察对象上具有预订的控制器都将收到超时已过期的信号。

我做了个简短的说明:https://plnkr.co/edit/JSgKWLwQLAhqgRGPn9ys

首先,您首先创建一个返回可观察值的方法。我使用的是Subject,因为您不需要发送初始值或已经发出的值:

var getExpiredSignal = function() {
  return subject.asObservable();
}

现在,当超时到期时,您需要执行以下操作通过可观察对象发送信号:

subject.next();

因为您的控制器确实通过以下行订阅了此可观察项:

timeout.getExpiredSignal().subscribe(() => console.log('Expired!'));

触发记录为“过期”的回调函数。

答案 1 :(得分:0)

我通过以下方法使其起作用

var idleService = function ($rootScope, $timeout, $log) {
var idleTimer = null,
    startTimer = function () {
        $log.log('Starting timer');
        idleTimer = $timeout(timerExpiring, 10000);
    },
    stopTimer = function () {
        if (idleTimer) {
            $timeout.cancel(idleTimer);
        }
    },
    resetTimer = function () {
        stopTimer();
        startTimer();
    },
    timerExpiring = function () {
        stopTimer();
        $rootScope.sessionFlag = true;
        $log.log('Timer expiring ..');
    };

startTimer();

return {
    startTimer: startTimer,
    stopTimer: stopTimer,
    resetTimer: resetTimer
};
};

现在,我不使用$ broadcast和$ on,但正在更改在HTML中引用的$ rootscope.sessionFlag