Có thể phát hiện thời gian " nhàn rỗi " trong JavaScript không?
Trường hợp sử dụng chính của tôi có lẽ sẽ là tìm nạp trước hoặc tải trước nội dung.
Thời gian nhàn rỗi: Thời gian người dùng không hoạt động hoặc không sử dụng CPU
Có thể phát hiện thời gian " nhàn rỗi " trong JavaScript không?
Trường hợp sử dụng chính của tôi có lẽ sẽ là tìm nạp trước hoặc tải trước nội dung.
Thời gian nhàn rỗi: Thời gian người dùng không hoạt động hoặc không sử dụng CPU
Câu trả lời:
Đây là một tập lệnh đơn giản sử dụng JQuery để xử lý các sự kiện mousemove và nhấn phím. Nếu hết thời gian, trang tải lại.
<script type="text/javascript">
var idleTime = 0;
$(document).ready(function () {
//Increment the idle time counter every minute.
var idleInterval = setInterval(timerIncrement, 60000); // 1 minute
//Zero the idle timer on mouse movement.
$(this).mousemove(function (e) {
idleTime = 0;
});
$(this).keypress(function (e) {
idleTime = 0;
});
});
function timerIncrement() {
idleTime = idleTime + 1;
if (idleTime > 19) { // 20 minutes
window.location.reload();
}
}
</script>
setInterval
, sau đó được đánh giá là JavaScript.
idleTime++;
thay vìidleTime = idleTime + 1;
'mousemove keydown click'
sử dụng cờ bit ( Event.MOUSEMOVE | Event.KEYDOWN | Event.CLICK
), vì chúng nhanh hơn so với thao tác chuỗi. Nhưng bạn có thực sự muốn làm điều này?
Không sử dụng jQuery, chỉ có JavaScript vanilla:
var inactivityTime = function () {
var time;
window.onload = resetTimer;
// DOM Events
document.onmousemove = resetTimer;
document.onkeypress = resetTimer;
function logout() {
alert("You are now logged out.")
//location.href = 'logout.html'
}
function resetTimer() {
clearTimeout(time);
time = setTimeout(logout, 3000)
// 1000 milliseconds = 1 second
}
};
Và khởi tạo hàm nơi bạn cần nó (ví dụ: onPageLoad).
window.onload = function() {
inactivityTime();
}
Bạn có thể thêm nhiều sự kiện DOM nếu bạn cần. Được sử dụng nhiều nhất là:
document.onload = resetTimer;
document.onmousemove = resetTimer;
document.onmousedown = resetTimer; // touchscreen presses
document.ontouchstart = resetTimer;
document.onclick = resetTimer; // touchpad clicks
document.onkeypress = resetTimer;
document.addEventListener('scroll', resetTimer, true); // improved; see comments
Hoặc đăng ký các sự kiện mong muốn bằng cách sử dụng một mảng
window.addEventListener('load', resetTimer, true);
var events = ['mousedown', 'mousemove', 'keypress', 'scroll', 'touchstart'];
events.forEach(function(name) {
document.addEventListener(name, resetTimer, true);
});
Danh sách sự kiện DOM : http://www.w3schools.com/jsref/dom_obj_event.asp
Nhớ sử dụng window
, hoặc document
theo nhu cầu của bạn. Ở đây bạn có thể thấy sự khác biệt giữa chúng: Sự khác biệt giữa cửa sổ, màn hình và tài liệu trong Javascript là gì?
Mã được cập nhật với @ frank-conijn và @daxchen cải thiện: window.onscroll
sẽ không kích hoạt nếu cuộn nằm trong phần tử có thể cuộn, vì các sự kiện cuộn không bong bóng. window.addEventListener('scroll', resetTimer, true)
, đối số thứ ba cho người nghe biết sự kiện bắt trong giai đoạn chụp thay vì pha bong bóng.
document.onload = function () { inactivityTime(); }; document.onmousedown = function () { inactivityTime(); }; document.onkeypress = function () { inactivityTime(); }; document.ontouchstart = function () { inactivityTime(); };
Cải thiện câu trả lời của Equiman:
function idleLogout() {
var t;
window.onload = resetTimer;
window.onmousemove = resetTimer;
window.onmousedown = resetTimer; // catches touchscreen presses as well
window.ontouchstart = resetTimer; // catches touchscreen swipes as well
window.onclick = resetTimer; // catches touchpad clicks as well
window.onkeypress = resetTimer;
window.addEventListener('scroll', resetTimer, true); // improved; see comments
function yourFunction() {
// your function for too long inactivity goes here
// e.g. window.location.href = 'logout.php';
}
function resetTimer() {
clearTimeout(t);
t = setTimeout(yourFunction, 10000); // time is in milliseconds
}
}
idleLogout();
.
Ngoài những cải tiến liên quan đến phát hiện hoạt động và thay đổi từ document
sang window
, tập lệnh này thực sự gọi hàm, thay vì để nó ở trạng thái chờ.
Nó không bắt được mức sử dụng CPU trực tiếp, nhưng điều đó là không thể, bởi vì thực thi một chức năng gây ra việc sử dụng CPU. Và người dùng không hoạt động cuối cùng dẫn đến việc sử dụng CPU bằng không, do đó, gián tiếp nó không sử dụng CPU.
window.onscroll
sẽ không kích hoạt nếu cuộn nằm trong một yếu tố có thể cuộn được, bởi vì các sự kiện cuộn không bong bóng. Sử dụng window.addEventListener('scroll', resetTimer, true)
, đối số thứ ba bảo người nghe nắm bắt sự kiện trong capture
giai đoạn thay vì bubble
pha (IE> 8), xem câu trả lời này
document.onscroll
có vấn đề tương tự, không kích hoạt nếu cuộn ở trong một đứa trẻ có thể cuộn?
addEventListener
thay vì onscroll
.
Tôi đã tạo ra một lib nhỏ mà làm điều này một năm trước:
https://github.com/shawnmclean/Idle.js
Sự miêu tả:
Thư viện javascript nhỏ để báo cáo hoạt động của người dùng trong trình duyệt (đi vắng, không sử dụng trang web, trong một tab khác, v.v.). đó là độc lập với bất kỳ thư viện javascript khác như jquery.
Người dùng Visual Studio có thể lấy nó từ NuGet bằng cách: PM> Install-Package Idle.js
Đây là một triển khai jQuery sơ bộ về ý tưởng của tvanfosson:
$(document).ready(function(){
idleTime = 0;
//Increment the idle time counter every second.
var idleInterval = setInterval(timerIncrement, 1000);
function timerIncrement()
{
idleTime++;
if (idleTime > 2)
{
doPreload();
}
}
//Zero the idle timer on mouse movement.
$(this).mousemove(function(e){
idleTime = 0;
});
function doPreload()
{
//Preload images, etc.
}
})
setInterval
một chuỗi! Chỉ cần cung cấp một chức năng như một biến!
setInterval()
đánh giá biểu thức trong phạm vi toàn cầu và do đó nó sẽ không tìm thấy timerIncrement()
hàm bên trong hàm xử lý.. Đây là một lý do khác để KHÔNG BAO GIỜ chuyển chuỗi sang setInterval()
. Chỉ cần vượt qua một tham chiếu chức năng thực tế và bạn sẽ không gặp vấn đề này bởi vì chúng được đánh giá trong phạm vi hiện tại.
Tương tự như giải pháp của Iconic ở trên (với sự kiện tùy chỉnh jQuery) ...
// use jquery-idle-detect.js script below
$(window).on('idle:start', function(){
//start your prefetch etc here...
});
$(window).on('idle:stop', function(){
//stop your prefetch etc here...
});
//jquery-idle-detect.js
(function($,$w){
// expose configuration option
// idle is triggered when no events for 2 seconds
$.idleTimeout = 2000;
// currently in idle state
var idle = false;
// handle to idle timer for detection
var idleTimer = null;
//start idle timer and bind events on load (not dom-ready)
$w.on('load', function(){
startIdleTimer();
$w.on('focus resize mousemove keyup', startIdleTimer)
.on('blur',idleStart) //force idle when in a different tab/window
;
]);
function startIdleTimer() {
clearTimeout(idleTimer); //clear prior timer
if (idle) $w.trigger('idle:stop'); //if idle, send stop event
idle = false; //not idle
var timeout = ~~$.idleTimeout; // option to integer
if (timeout <= 100) timeout = 100; // min 100ms
if (timeout > 300000) timeout = 300000; // max 5 minutes
idleTimer = setTimeout(idleStart, timeout); //new timer
}
function idleStart() {
if (!idle) $w.trigger('idle:start');
idle = true;
}
}(window.jQuery, window.jQuery(window)))
Bạn có thể làm điều đó thanh lịch hơn với dấu gạch dưới và jquery -
$('body').on("click mousemove keyup", _.debounce(function(){
// do preload here
}, 1200000)) // 20 minutes debounce
Câu trả lời của tôi được lấy cảm hứng từ câu trả lời của vijay , nhưng là một giải pháp ngắn gọn, tổng quát hơn mà tôi nghĩ tôi muốn chia sẻ cho bất kỳ ai mà nó có thể giúp ích.
(function () {
var minutes = true; // change to false if you'd rather use seconds
var interval = minutes ? 60000 : 1000;
var IDLE_TIMEOUT = 3; // 3 minutes in this example
var idleCounter = 0;
document.onmousemove = document.onkeypress = function () {
idleCounter = 0;
};
window.setInterval(function () {
if (++idleCounter >= IDLE_TIMEOUT) {
window.location.reload(); // or whatever you want to do
}
}, interval);
}());
Vì hiện tại, mã này sẽ thực thi ngay lập tức và tải lại trang hiện tại của bạn sau 3 phút không di chuyển chuột hoặc nhấn phím.
Điều này sử dụng JavaScript vanilla đơn giản và một biểu thức hàm được gọi ngay lập tức để xử lý thời gian chờ nhàn rỗi một cách sạch sẽ và khép kín.
onclick
bài tập vì có lẽ không cần thiết ngoài onmousemove
, nhưng rõ ràng bất kỳ sự kiện nào được kích hoạt theo chương trình sẽ tiếp tục được đặt lại idleCounter
. Tôi không chắc tại sao bạn mô phỏng tương tác của người dùng thay vì chỉ gọi một chức năng, nhưng nếu đó là điều bạn cần làm vì một số lý do, câu trả lời này rõ ràng sẽ không hiệu quả với bạn, cũng như hầu hết các câu trả lời khác tôi sẽ đã xem xét câu hỏi này.
Tôi biết đó là một câu hỏi tương đối cũ, nhưng tôi có cùng một vấn đề và tôi đã tìm thấy một giải pháp khá tốt.
Tôi đã sử dụng: jquery.idle và tôi chỉ cần làm:
$(document).idle({
onIdle: function(){
alert('You did nothing for 5 seconds');
},
idle: 5000
})
Xem bản demo của JsFiddle .
(Chỉ để biết thông tin: xem phần này để theo dõi sự kiện phía sau Tải trình duyệt )
keepTracking
tùy chọn thành false
. Nếu bạn muốn thiết lập lại, bạn có thể thử khởi động lại. Dưới đây là một ví dụ sửa đổi sẽ chỉ bắn một lần: jsfiddle.net/f238hchm/12
Tất cả các câu trả lời trước có một trình xử lý mousemove luôn hoạt động. Nếu trình xử lý là jQuery, thì quá trình xử lý bổ sung mà jQuery thực hiện có thể tăng lên. Đặc biệt nếu người dùng đang sử dụng chuột chơi game, có thể xảy ra tới 500 sự kiện mỗi giây.
Giải pháp này tránh xử lý mọi sự kiện mousemove. Điều này dẫn đến một lỗi thời gian nhỏ, nhưng bạn có thể điều chỉnh theo nhu cầu của mình.
function setIdleTimeout(millis, onIdle, onUnidle) {
var timeout = 0;
startTimer();
function startTimer() {
timeout = setTimeout(onExpires, millis);
document.addEventListener("mousemove", onActivity);
document.addEventListener("keydown", onActivity);
}
function onExpires() {
timeout = 0;
onIdle();
}
function onActivity() {
if (timeout) clearTimeout(timeout);
else onUnidle();
//since the mouse is moving, we turn off our event hooks for 1 second
document.removeEventListener("mousemove", onActivity);
document.removeEventListener("keydown", onActivity);
setTimeout(startTimer, 1000);
}
}
$(startTimer)
này tương đương với $(document).ready(startTimer)
, đảm bảo rằng DOM đã sẵn sàng trước khi bạn kết nối các sự kiện mousemove và nhấn phím.
Bạn có thể có thể hack một cái gì đó cùng nhau bằng cách phát hiện chuyển động của chuột trên cơ thể của biểu mẫu và cập nhật một biến toàn cục với thời gian di chuyển cuối cùng. Sau đó, bạn cần phải có một bộ định thời khoảng thời gian chạy để kiểm tra định kỳ thời gian di chuyển cuối cùng và thực hiện một cái gì đó nếu nó đã đủ dài kể từ khi di chuyển chuột cuối cùng được phát hiện.
Tôi đã viết một lớp ES6 nhỏ để phát hiện hoạt động và nếu không thì bắn các sự kiện khi hết thời gian rảnh. Nó bao gồm bàn phím, chuột và cảm ứng , có thể được kích hoạt và hủy kích hoạt và có API rất gọn gàng:
const timer = new IdleTimer(() => alert('idle for 1 minute'), 1000 * 60 * 1);
timer.activate();
Nó không phụ thuộc vào jQuery, mặc dù bạn có thể cần chạy nó qua Babel để hỗ trợ các trình duyệt cũ hơn.
https://gist.github.com/4547ef5718fd2d31e5cdcafef0208096
Tôi có thể phát hành nó dưới dạng gói npm sau khi nhận được một số phản hồi.
Nếu bạn đang nhắm mục tiêu một trình duyệt được hỗ trợ (Chrome hoặc Firefox kể từ tháng 12 năm 2018), bạn có thể thử nghiệm requestIdleCallback và bao gồm shim requestIdleCallback cho các trình duyệt không được hỗ trợ.
Hãy thử mã này, nó hoạt động hoàn hảo.
var IDLE_TIMEOUT = 10; //seconds
var _idleSecondsCounter = 0;
document.onclick = function () {
_idleSecondsCounter = 0;
};
document.onmousemove = function () {
_idleSecondsCounter = 0;
};
document.onkeypress = function () {
_idleSecondsCounter = 0;
};
window.setInterval(CheckIdleTime, 1000);
function CheckIdleTime() {
_idleSecondsCounter++;
var oPanel = document.getElementById("SecondsUntilExpire");
if (oPanel)
oPanel.innerHTML = (IDLE_TIMEOUT - _idleSecondsCounter) + "";
if (_idleSecondsCounter >= IDLE_TIMEOUT) {
alert("Time expired!");
document.location.href = "SessionExpired.aspx";
}
}
<script type="text/javascript">
var idleTime = 0;
$(document).ready(function () {
//Increment the idle time counter every minute.
idleInterval = setInterval(timerIncrement, 60000); // 1 minute
//Zero the idle timer on mouse movement.
$('body').mousemove(function (e) {
//alert("mouse moved" + idleTime);
idleTime = 0;
});
$('body').keypress(function (e) {
//alert("keypressed" + idleTime);
idleTime = 0;
});
$('body').click(function() {
//alert("mouse moved" + idleTime);
idleTime = 0;
});
});
function timerIncrement() {
idleTime = idleTime + 1;
if (idleTime > 10) { // 10 minutes
window.location.assign("http://www.google.com");
}
}
</script>
Tôi nghĩ rằng mã jquery này là hoàn hảo, mặc dù được sao chép và sửa đổi từ các câu trả lời ở trên !! đừng quên bao gồm thư viện jquery trong tập tin của bạn!
Mặc dù vấn đề với tất cả các giải pháp này là chính xác nhưng chúng không thực tế, khi tính đến tập hợp thời gian chờ phiên có giá trị, sử dụng PHP, .NET hoặc trong tệp Application.cfc cho các nhà phát triển Coldfusion. Thời gian được đặt bởi giải pháp trên cần đồng bộ hóa với thời gian chờ phiên phía máy chủ. Nếu cả hai không đồng bộ hóa, bạn có thể gặp phải sự cố sẽ khiến người dùng của bạn thất vọng và bối rối. Ví dụ: thời gian chờ phiên phía máy chủ có thể được đặt thành 60 phút, nhưng người dùng có thể tin rằng mình an toàn, vì thời gian nhàn rỗi JavaScript đã tăng tổng thời gian người dùng có thể dành cho một trang. Người dùng có thể đã dành thời gian điền vào một biểu mẫu dài, và sau đó đi gửi nó. Thời gian chờ phiên có thể bắt đầu trước khi quá trình gửi biểu mẫu được xử lý. Tôi có xu hướng chỉ cung cấp cho người dùng của mình 180 phút, và sau đó sử dụng JavaScript để tự động đăng xuất người dùng. Về cơ bản, sử dụng một số mã ở trên, để tạo một bộ đếm thời gian đơn giản, nhưng không có phần sự kiện bắt chuột. Theo cách này, thời gian phía máy khách và phía máy chủ của tôi đồng bộ hóa hoàn hảo. Không có sự nhầm lẫn, nếu bạn hiển thị thời gian cho người dùng trong giao diện người dùng của bạn, vì nó giảm. Mỗi khi một trang mới được truy cập trong CMS, phiên máy chủ & bộ đếm thời gian JavaScript được đặt lại. Đơn giản & thanh lịch. Nếu một người dùng ở lại trên một trang trong hơn 180 phút, tôi cho rằng có điều gì đó không ổn với trang đó, ngay từ đầu. khi nó giảm Mỗi khi một trang mới được truy cập trong CMS, phiên máy chủ & bộ đếm thời gian JavaScript được đặt lại. Đơn giản & thanh lịch. Nếu một người dùng ở lại trên một trang trong hơn 180 phút, tôi cho rằng có điều gì đó không ổn với trang đó, ngay từ đầu. khi nó giảm Mỗi lần một trang mới được truy cập trong CMS, phiên phía máy chủ & JavaScript giờ là thiết lập lại. Đơn giản & thanh lịch. Nếu một người dùng ở lại trên một trang trong hơn 180 phút, tôi cho rằng có điều gì đó không ổn với trang đó, ngay từ đầu.
JavaScript thuần với thời gian đặt lại và các ràng buộc thông qua addEventListener
(function() {
var t,
timeout = 5000;
function resetTimer() {
console.log("reset: " + new Date().toLocaleString());
if (t) {
window.clearTimeout(t);
}
t = window.setTimeout(logout, timeout);
}
function logout() {
console.log("done: " + new Date().toLocaleString());
}
resetTimer();
//And bind the events to call `resetTimer()`
["click", "mousemove", "keypress"].forEach(function(name) {
console.log(name);
document.addEventListener(name, resetTimer);
});
}());
(Một phần lấy cảm hứng từ logic cốt lõi tốt của Equiman trước đó trong chủ đề này.)
sessionExpirst.js rất nhẹ nhưng hiệu quả và có thể tùy chỉnh. Sau khi thực hiện, sử dụng chỉ trong một hàng:
sessionExpiration(idleMinutes, warningMinutes, logoutUrl);
Đây là một ví dụ về những gì nó trông giống như trong hành động, nếu bạn không thay đổi CSS.
Tôi đã viết một plugin jQuery đơn giản sẽ làm những gì bạn đang tìm kiếm.
https://github.com/afklondon/jquery.inactivity
$(document).inactivity( {
interval: 1000, // the timeout until the inactivity event fire [default: 3000]
mouse: true, // listen for mouse inactivity [default: true]
keyboard: false, // listen for keyboard inactivity [default: true]
touch: false, // listen for touch inactivity [default: true]
customEvents: "customEventName", // listen for custom events [default: ""]
triggerAll: true, // if set to false only the first "activity" event will be fired [default: false]
});
Kịch bản sẽ lắng nghe chuột, bàn phím, cảm ứng và các sự kiện tùy chỉnh không hoạt động (nhàn rỗi) và kích hoạt các sự kiện "hoạt động" và "không hoạt động" toàn cầu.
Hi vọng điêu nay co ich :)
Chỉ cần một vài suy nghĩ, một hoặc hai con đường để khám phá.
Có thể có một chức năng chạy cứ sau 10 giây và kiểm tra biến "bộ đếm" không? Nếu điều đó là có thể, bạn có thể di chuột qua trang, bạn có thể không? Nếu vậy, hãy sử dụng sự kiện di chuột để đặt lại biến "bộ đếm". Nếu chức năng của bạn được gọi và bộ đếm nằm trên phạm vi mà bạn xác định trước, thì hãy thực hiện hành động của bạn.
Một lần nữa, chỉ là một vài suy nghĩ ... Hy vọng nó sẽ giúp.
Tôi đã kiểm tra tập tin làm việc mã này:
var timeout = null;
var timee = '4000'; // default time for session time out.
$(document).bind('click keyup mousemove', function(event) {
if (timeout !== null) {
clearTimeout(timeout);
}
timeout = setTimeout(function() {
timeout = null;
console.log('Document Idle since '+timee+' ms');
alert("idle window");
}, timee);
});
Đây là giải pháp tốt nhất tôi đã tìm thấy: http://css-tricks.com/snippets/jquery/fire-event-when-user-is-idle/
Đây là JS:
idleTimer = null;
idleState = false;
idleWait = 2000;
(function ($) {
$(document).ready(function () {
$('*').bind('mousemove keydown scroll', function () {
clearTimeout(idleTimer);
if (idleState == true) {
// Reactivated event
$("body").append("<p>Welcome Back.</p>");
}
idleState = false;
idleTimer = setTimeout(function () {
// Idle Event
$("body").append("<p>You've been idle for " + idleWait/1000 + " seconds.</p>");
idleState = true; }, idleWait);
});
$("body").trigger("mousemove");
});
}) (jQuery)
Bạn có thể sử dụng giải pháp được đề cập dưới đây
var idleTime;
$(document).ready(function () {
reloadPage();
$('html').bind('mousemove click mouseup mousedown keydown keypress keyup submit change mouseenter scroll resize dblclick', function () {
clearTimeout(idleTime);
reloadPage();
});
});
function reloadPage() {
clearTimeout(idleTime);
idleTime = setTimeout(function () {
location.reload();
}, 3000);
}
Tôi sử dụng phương pháp này, vì bạn không cần phải liên tục đặt lại thời gian khi một sự kiện diễn ra, thay vào đó chúng tôi chỉ ghi lại thời gian, điều này tạo ra điểm bắt đầu nhàn rỗi.
function idle(WAIT_FOR_MINS, cb_isIdle) {
var self = this,
idle,
ms = (WAIT_FOR_MINS || 1) * 60000,
lastDigest = new Date(),
watch;
//document.onmousemove = digest;
document.onkeypress = digest;
document.onclick = digest;
function digest() {
lastDigest = new Date();
}
// 1000 milisec = 1 sec
watch = setInterval(function(){
if (new Date() - lastDigest > ms && cb_isIdel) {
clearInterval(watch);
cb_isIdle();
}
}, 1000*60);
},
Bạn có thể có thể phát hiện sự không hoạt động trên trang web của mình bằng các thủ thuật mousemove được liệt kê, nhưng điều đó sẽ không cho bạn biết rằng người dùng không ở trên một trang khác trong một cửa sổ hoặc tab khác, hoặc người dùng đang ở trong Word hoặc Photoshop, hoặc WOW và chỉ không nhìn vào trang của bạn tại thời điểm này. Nói chung, tôi chỉ cần thực hiện tìm nạp trước và dựa vào đa tác vụ của khách hàng. Nếu bạn thực sự cần chức năng này, bạn sẽ làm một cái gì đó với điều khiển activex trong windows, nhưng tốt nhất là xấu.
Đây là một dịch vụ AngularJS để thực hiện trong Angular.
/* 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;
}]);
Hãy nhớ rằng trình kiểm tra nhàn rỗi này sẽ chạy cho tất cả các tuyến, vì vậy nó nên được khởi tạo .run()
khi tải ứng dụng góc. Sau đó, bạn có thể sử dụng idleChecker.secondsIdle
bên trong mỗi tuyến đường.
myApp.run(['idleChecker',function(idleChecker){
idleChecker.init();
}]);
Ra mắt thực sự là một ý tưởng tuyệt vời! Đây là phiên bản cho các dự án miễn phí của jQuery:
const derivedLogout = createDerivedLogout(30);
derivedLogout(); // it could happen that user 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 )
}
Đơn giản như nó có thể nhận được, phát hiện khi chuột chỉ di chuyển:
var idle = false;
document.querySelector('body').addEventListener('mousemove', function(e) {
if(idle!=false)idle = false;
});
var idleI = setInterval(function()
{
if(idle == 'inactive')
{
return;
}
if(idle == true)
{
idleFunction();
idle = 'inactive';
return;
}
idle = true;
}, 30000);// half the expected time, idle will trigger after 60s in this case.
function idleFuntion()
{
console.log('user is idle');
}
Vâng, bạn có thể đính kèm một sự kiện nhấp chuột hoặc mousemove vào thân tài liệu đặt lại bộ hẹn giờ. Có một chức năng mà bạn gọi theo các khoảng thời gian để kiểm tra xem bộ định thời có quá thời gian quy định không (như 1000 mili) và bắt đầu tải trước.
Javascript không có cách nào để nói về việc sử dụng CPU. Điều này sẽ phá vỡ javascript hộp cát chạy bên trong.
Ngoài ra, việc kết nối các sự kiện onmouseover và onkeydown của trang có thể sẽ hiệu quả.
Bạn cũng có thể đặt sử dụng setTimeout trong sự kiện onload để lên lịch cho hàm được gọi sau khi trì hoãn.
// Call aFunction after 1 second
window.setTimeout(aFunction, 1000);