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

【问题标题】：Show timeout error message after particular interval time angularjs在特定间隔时间 angularjs 后显示超时错误消息
【发布时间】：2018-06-20 08:52:17
【问题描述】：

我正在尝试在特定的空闲时间间隔（比如 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 函数中修改变量。

【问题讨论】：

标签： angularjs settimeout

【解决方案1】：

您可以使用RxJS 创建一个可观察对象。您的控制器将通过您的服务订阅它，当超时到期时，会在您的 observable 上发出一个值（可能是一个 void 值）。这样，每个订阅了该 observable 的控制器都会收到超时已过期的信号。

我做了一个 plunker 来说明这一点：https://plnkr.co/edit/JSgKWLwQLAhqgRGPn9ys

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

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

现在，当你超时过期时，你需要通过 observable 发送一个信号：

subject.next();

因为您的控制器确实通过该行订阅了这个 observable：

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

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

【讨论】：

感谢您的输入。我正在尝试使用 angularjs，您能否提供一些输入。
对不起，我认为我们可以在 angular 中使用 Rxjs 而不是在 angularjs 中
RxJS “只是”一个 JavaScript 库，你甚至可以在非 Angular 项目中使用；-)
当您可以使用完全符合您需求的 Observables 时，用这些变量污染 rootScope 对象有点可惜。
hmm..ya..感谢您的意见，这对我来说也是一个新的学习。

【解决方案2】：

我用下面的方法让它工作

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

【讨论】：