当用户在指定时间内没有任何操作时，Javascript 超时

Question

我想当网页上的用户在指定的时间内没有任何活动时调用 js 函数。如果用户有活动，则重置超时。我试图搜索但找不到任何特别的东西。我熟悉 setTimeout() 和clearTimeout() 及其工作原理。我正在寻找的是在哪里/如何监视用户活动。有没有可以设置和清除计时器的事件？

谢谢。

编辑＃1：

该网页有一个输入文本框和一个输入文本框。一键。这是一种常规的聊天页面。当我说没有用户活动时，我的意思是用户没有在文本框中输入任何内容或在指定的时间内没有按下任何按钮。 还有一点，它是针对基于触摸的智能手机设备的。

编辑 #2：

谢谢大家的建议。我已经根据提供的多个答案实施了解决方案。因此，我会对我认为有帮助的所有答案投赞成票，而不是接受一个答案。

Answer 1

// Using jQuery (but could use pure JS with cross-browser event handlers):
var idleSeconds = 30;

$(function(){
  var idleTimer;
  function resetTimer(){
    clearTimeout(idleTimer);
    idleTimer = setTimeout(whenUserIdle,idleSeconds*1000);
  }
  $(document.body).bind('mousemove keydown click',resetTimer); //space separated events list that we want to monitor
  resetTimer(); // Start the timer when the page loads
});

function whenUserIdle(){
  //...
}

编辑：出于某种原因不使用 jQuery？下面是一些（未经测试的）代码，应该是跨浏览器干净的（在某种程度上；例如，在 IE5 Mac 上不起作用；）：

attachEvent(window,'load',function(){
  var idleSeconds = 30;
  var idleTimer;
  function resetTimer(){
    clearTimeout(idleTimer);
    idleTimer = setTimeout(whenUserIdle,idleSeconds*1000);
  }
  attachEvent(document.body,'mousemove',resetTimer);
  attachEvent(document.body,'keydown',resetTimer);
  attachEvent(document.body,'click',resetTimer);

  resetTimer(); // Start the timer when the page loads
});

function whenUserIdle(){
  //...
}

function attachEvent(obj,evt,fnc,useCapture){
  if (obj.addEventListener){
    obj.addEventListener(evt,fnc,!!useCapture);
    return true;
  } else if (obj.attachEvent){
    return obj.attachEvent("on"+evt,fnc);
  }
} 

Answer 2

这需要一个反跳器：

function debounce(callback, timeout, _this) {
    var timer;
    return function(e) {
        var _that = this;
        if (timer)
            clearTimeout(timer);
        timer = setTimeout(function() { 
            callback.call(_this || _that, e);
        }, timeout);
    }
}

像这样使用：

// we'll attach the function created by "debounce" to each of the target
// user input events; this function only fires once 2 seconds have passed
// with no additional input; it can be attached to any number of desired
// events
var userAction = debounce(function(e) {
    console.log("silence");
}, 2000);

document.addEventListener("mousemove", userAction, false);
document.addEventListener("click", userAction, false);
document.addEventListener("scroll", userAction, false);

第一个用户操作（鼠标移动、单击或滚动）启动一个函数（附加到计时器），每次发生另一个用户操作时该函数都会重置。在经过指定的时间且没有任何操作后，主回调才会触发。

请注意，不需要全局标志或超时变量。全局范围仅接收您的去抖回调。 谨防需要维护全局状态的解决方案；在更大的应用程序中，它们将很难推理。

另请注意，此解决方案完全是通用的。请注意仅适用于您极其狭窄的用例的解决方案。

Answer 3

大多数 JavaScript 事件冒泡，因此您可以执行如下操作：

• 列出一个列表您认为是“用户活动”的所有事件（例如，click、mousemove、keydown 等
• ）一个函数作为所有这些事件的事件监听器document （或者可能是 document.body 对于其中一些；我不记得这是否是一个问题）。
• 当监听器被触发时，让它用 clearTimeout/setTimeout 重置计时器

所以你最终会得到这样的结果：

var events = ['click', 'mousemove', 'keydown'],
    i = events.length,
    timer,
    delay = 10000,
    logout = function () {
        // do whatever it is you want to do
        // after a period of inactivity
    },
    reset = function () {
        clearTimeout(timer);
        timer = setTimeout(logout, 10000);
    };

while (i) {
    i -= 1;
    document.addEventListener(events[i], reset, false);
}
reset();

请注意，你会遇到一些问题用上面的代码来解决：

• 它不跨浏览器兼容。它只使用addEventListener，所以它在 IE6-8 中不起作用
• 它污染了全局命名空间。它创建了许多可能与其他脚本冲突的多余变量。

更重要的是让您了解自己可以做什么。

现在还有其他四个答案，但我已经全部输入了，所以：P

Answer 4

您希望在文档级别监视 mousemove、keypress、keydown 和/或 click 等事件。

编辑：这是一个智能手机应用程序，可以改变您想要监听的事件。考虑到您的文本框和按钮要求，我将监听 oninput ，然后将 resetTimeout() 调用添加到按钮的点击处理程序中。

var inactivityTimeout = 0;
function resetTimeout() {
    clearTimeout(inactivityTimeout);
    inactivityTimeout = setTimeout(inactive, 300000);
}
function inactive() {
   ...
}
document.getElementById("chatInput").oninput = resetTimeout;

Answer 5

像这样的东西：

function onInactive(ms, cb){   

    var wait = setTimeout(cb, ms); 

    // Bind all events you consider as activity
    // Note that binding this way overrides any previous events bound the same wa
    // So if you already have events bound to document, use AddEventListener and AttachEvent instead
    document.onmousemove = document.mousedown = document.mouseup = document.onkeydown = document.onkeyup = document.focus = function(){
        clearTimeout(wait);
        wait = setTimeout(cb, ms);

    };

}

IE：http://jsfiddle.net/acNfy/
右下框架中的活动将延迟回调。

Answer 6

我正在使用一个漂亮的小“延迟”方法，我在 这个线程 中找到了

var delay = (function(){
  var timer = 0;
  return function(callback, ms){
    clearTimeout (timer);
    timer = setTimeout(callback, ms);
  };
})();

类似的用法

delay(function(){ doSomethingWhenNoInputFor400ms(); },400);

Answer 7

另外，请查看 Paul Irish 的 jQueryidleTimer 插件 (jquery.idle-timer.js）。它基于 Nicholas C. Zakas 的 使用 JavaScript 和 YUI 3 检测用户是否空闲 文章 (idle-timer.js）。

它着眼于与其他答案类似的事件，还有更多。

events  = 'mousemove keydown DOMMouseScroll mousewheel mousedown touchstart touchmove';
// activity is one of these events