每当用户与SPA交互时，重置倒计时计时器

Question

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

• 每当输入键盘输入时
• 当页面的任何组件被点击时，包括例如下拉打开，这不会触发任何余烬动作

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

我想考虑一个特殊情况:每当用户单击非活动区域(例如背景)时，我不确定是否重置计时器更好，所以我希望能够捕捉到这一点，以便决定以后要做什么。我不确定如何定义非活动区域:从用户的角度来看，是点击任何地方没有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
    }
  }
});

更新:我感到内疚，它来自这里:在JavaScript中优雅地检测空闲时间