jQuery는 사용자의 비활성 15 초 내에 페이지의 모든 부분을 변경합니다.

Question

페이지에 여러 개의 작은 창이있는 html 페이지가 있습니다 (창 수가 정의되지 않았습니다). 각 창은 .ticking 클래스입니다. .ticking 클래스는 jQuery가 사용자의 브라우저에 서버 시간 +을 표시하는 데 사용됩니다. 일부 창은 똑같이 보이지만 .ticking 클래스는 없습니다. 그런 창문에서는 아무 일도 일어나지 않습니다. 즉 .ticking 클래스를 반환 페이지에서 클릭하면 다시 모든 것을) 페이지

이 모든 곳에서 수업을 똑딱 제거 반환 비활성 15 초에

1) 쇼 팝업과 :

는 내가 원하는 그것을 가진 사람들에게.

아이디어가 있습니까?

는 지금까지 내가 이해, 나는 .ticking-sleep 하나에 .ticking 클래스 이름을 변경하고 사용자가 팝업을 닫을 때 .ticking에 .ticking-sleep의 이름을 변경해야합니다. 그러나, 나는 아직도 그걸 깨닫는 방법과 사용할 사건을 모른다.

Answer 1

사용자 활동이 주로 마우스 움직임을 포함한다고 가정합니다. 클래스 이름을 변경하는 함수에 대해 setTimeout을 사용할 수 있습니다. mousemove 핸들러를 사용하여 해당 시간 초과를 항상 15 초로 재설정 할 수 있습니다. 사용자가 실행하고 클래스를 변경됩니다 시간 초과 함수 호출을 이동 중지되면,

테스트되지 않은,하지만 뭔가 같은 등 당신의 팝업을 보여

var inactiveTimeout = setTimeout(handleInactiveUser, 15000); 

$(document).mousemove(function(){ 
    //clear the timeout and reset 
    clearTimeout(inactiveTimeout); 
    inactiveTimeout = setTimeout(handleInactiveUser, 15000); 
}); 

function handleInactiveUser(){ 
    // change the classes 
    // show the popup 
} 

UPDATE: DEMO가 잘 내가 생각하는 원칙을 보여줍니다.