在指定时间内没有用户操作时的Javascript超时

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

多谢各位

编辑#1：

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

编辑#2：

---

谢谢大家的建议。我已经根据提供的多个答案实施了解决方案。因此，我将放弃对所有我认为有用的答案进行投票，而不是接受其中一个作为答案。

您希望在文档级别监视诸如

mousemove

、

keypress

、

keydown

、和/或

单击

之类的事件

编辑：这是一款智能手机应用程序，可更改您想要收听的事件。根据您的文本框和按钮要求，我会先听一下

oninput

，然后将

resetTimeout（）

调用添加到按钮的单击处理程序中

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

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

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

• 列出你认为是“来自用户的活动”的所有事件列表（例如，代码>点击< /代码>，<代码> MuMeMoo< <代码>，<代码>键下< /代码>等）
• 将一个函数作为所有这些事件的事件侦听器附加到

  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();

// 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);

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);

    };

}

请注意，使用上述代码必须解决一些问题：

• 它不兼容跨浏览器。它只使用

  addEventListener

  ，因此在IE6-8中不起作用
• 它会污染全局命名空间。它会创建大量多余的变量，这些变量可能与其他脚本冲突

更重要的是让你知道你能做什么

---

现在还有四个其他答案，但我已经全部打好了，所以这里有：p

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);
    }
}

这样使用：

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();

// 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);

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);

    };

}

第一个用户操作（mousemove、click或scroll）启动一个函数（附加到计时器），该函数在每次发生另一个用户操作时重置。主回调在指定的时间内未执行任何操作之前不会启动

请注意，不需要全局标志或超时变量。全局作用域只接收取消公告的回调注意需要维护全局状态的解决方案；在更大的应用程序环境中，很难对它们进行推理

还要注意，此解决方案完全是通用的。当心那些只适用于极其狭窄的用例的解决方案。

类似这样的内容：

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();

// 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);

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);

    };

}

即： 右下角框架中的活动将延迟回调。

另外，请看Paul Irish（）。它是根据尼古拉斯·C·扎卡斯的文章（）改编的

它关注与其他答案类似的事件，还有一些其他的

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

---

我使用了一种巧妙的“延迟”方法，我在

像

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

---

请定义“用户活动”请检查我的编辑是否有问题。为什么不

而（i--）

+1表示该迭代样式。：）因为我是一个克罗克福德纯粹主义者。Crockfordian？我很欣赏这个人和他的分享，但我个人并不同意一些“建议”（包括这个）。我个人认为我在使用

++

或

--

时从未遇到过问题。请注意，如果页面加载且用户从未与页面交互，这将永远不会调用

非活动。您需要手动调用
resetTimeout（）
。谢谢您的快速回答，但我正在寻找纯JS。@indusBull明白。编辑。这很有帮助，谢谢！在jquery版本中，对我来说，逗号分隔的事件列表不起作用。我不得不使用空格。你真可爱！你刚刚结束了我两天的徒劳研究。我正在使用createJS开发画布图像滑块，希望在用户不做任何事情时使用“自动滑动”功能，然后在用户单击某个对象时停止“自动滑动”。这对我来说太完美了！这是你的一票。在你看到“过度杀戮”的地方，我看到了一个概括。