html - 每当用户与 SPA 交互时重置倒数计时器

Question

我有一个 ember 单页应用程序。该应用程序具有自动注销功能:每当计时器到期时，它将自动注销。每次用户与页面交互时，我都想重置计时器:

• 每当输入键盘输入时
• 每当点击页面的任何组件时，包括例如下拉菜单打开，它不会触发任何 ember 操作

是否可以添加任何代码以在发送到 ember 之前捕获任何鼠标/键盘事件？重置计时器后，应将事件传递给 ember 或 CSS 管道进行进一步处理。

我想考虑一个特殊情况:每当用户点击非事件区域(例如背景)时，我不确定是否重置计时器会更好，所以我想能够捕获这一点，以便以后决定做什么。我不确定如何定义非事件区域:从用户的 Angular 来看，点击没有 CSS 效果或任何其他类型的效果被触发的地方。

Answer 1

这就是我们正在使用的东西，我肯定是从别人那里偷来的，然后将它加工到 Ember 中，但我不会找出在哪里。它实际上只是告诉您他们是否以任何方式与页面进行了交互，而不一定是是否单击了任何组件等。

App.idleTime = 0;
$(document).ready(function () {
  //Increment the idle time counter every minute.
  var idleInterval = setInterval(function() {
    App.idleTime = App.idleTime + 1;
  }, 60000); // 1 minute

  //Zero the idle timer on mouse movement.
  $(this).mousemove(function (e) {
    App.idleTime = 0;
  });
  $(this).keypress(function (e) {
    App.idleTime = 0;
  });
});

然后我在我的应用程序路由中有一个计划任务，它监视空闲时间并在适当的时候对其进行处理。下面的代码是编造的，但应该给你一个想法。

App.ApplicationRoute = Em.Route.extend({
  idleMax: 10,
  setupBatman: function(){
    this.watchJoker();
  }.on('init'),
  watchJoker: function(){
    Ember.run.later(this, this.watchJoker, 1000);

    if (App.idleTime >= this.get('idleMax')) {
      console.log("You are looking idle, I'm gonna kick you.");
      // kick
    }
  }
});

更新:我感到内疚，它来自这里:Detecting idle time in JavaScript elegantly