Question

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

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

是否可以添加任何代码来捕获任何鼠标/键盘事件，然后才能将其发送到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
    }
  }
});

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

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

1 个答案: