是否有可能在JavaScript中检测“空闲”时间?
我的主要用例可能是预取或预加载内容。
我将空闲时间定义为用户不活动或没有任何CPU使用的时间段
当前回答
如果你的目标是一个受支持的浏览器(截至2018年12月的Chrome或Firefox)，你可以尝试使用requestIdleCallback，并为不受支持的浏览器包含requestIdleCallback垫片。
其他回答
你可以用Underscore.js和jQuery更优雅地做到这一点:
$('body').on("click mousemove keyup", _.debounce(function(){
// do preload here
}, 1200000)) // 20 minutes debounce
您可以在文档主体上附加一个单击或鼠标移动事件，以重置计时器。
有一个函数，你在定时间隔调用，检查定时器是否超过指定的时间(如1000毫秒)，并开始你的预加载。
Debounce其实是个好主意!下面是一个用于无jquery项目的版本:
const derivedLogout = createDerivedLogout(30);
derivedLogout(); // It could happen that the user is too idle)
window.addEventListener('click', derivedLogout, false);
window.addEventListener('mousemove', derivedLogout, false);
window.addEventListener('keyup', derivedLogout, false);
function createDerivedLogout (sessionTimeoutInMinutes) {
return _.debounce( () => {
window.location = this.logoutUrl;
}, sessionTimeoutInMinutes * 60 * 1000 )
}
下面是一个在Angular中完成的AngularJS服务。
/* Tracks now long a user has been idle. secondsIdle can be polled
at any time to know how long user has been idle. */
fuelServices.factory('idleChecker',['$interval', function($interval){
var self = {
secondsIdle: 0,
init: function(){
$(document).mousemove(function (e) {
self.secondsIdle = 0;
});
$(document).keypress(function (e) {
self.secondsIdle = 0;
});
$interval(function(){
self.secondsIdle += 1;
}, 1000)
}
}
return self;
}]);
请记住，这个空闲检查器将为所有路由运行，因此应该在angular应用程序加载时在.run()中初始化它。然后你可以使用idleChecker。在每个路由内的secondside。
myApp.run(['idleChecker',function(idleChecker){
idleChecker.init();
}]);
您可能可以通过检测窗体主体上的鼠标移动并使用最后的移动时间更新全局变量来拼凑一些东西。然后，您需要运行一个间隔计时器，定期检查最后一次移动时间，如果距离检测到最后一次鼠标移动已经足够长，则执行一些操作。
