How can I write a javascript function that moves between my tabs on a html webpage every few seconds if the user is idle

Question

I got the basis of the code below from Detecting idle time in JavaScript elegantly

But it doesn't really work unless there is a mouse movement after I'm on a webpage. If I want to load my next html file from clicking my menu bar and I move the mouse a little then do nothing for 3 seconds, the tab will change automatically. But after that change and I STILL leave it idle, it just stays there. I'm trying to write a function that does something when the use is idle continuously every 3 seconds. I want to keep toggling between tabs if the user is idle. I need a function for that or an idea of what methods to use.

function idle_time(){
var t;

//document.onload = resetTimer;

window.onload = resetTimer;
//window.onloadend = resetTimer;
window.onmousemove = resetTimer;
window.onmousedown = resetTimer; // touchscreen presses
window.ontouchstart = resetTimer;
window.onclick = resetTimer;     // touchpad clicks
window.onscroll = resetTimer;    // scrolling with arrow keys
window.onwheel = resetTimer;
window.onkeypress = resetTimer;
window.onhashchange = resetTimer;


 document.addEventListener("load",resetTimer);
// document.addEventListener("mousedown",resetTimer);
// document.addEventListener("touchstart",resetTimer);
// document.addEventListener("click",resetTimer);
// document.addEventListener("scroll",resetTimer);
// document.addEventListener("keypress",resetTimer);


function next_tab(){
    var curr_window = window.location.href; // Get URL of string of webpage location
    i = pages_arr.indexOf(curr_window); // Get the index of that location in the array of pages

    if (i==pages_arr.length - 1){
            i = 0;  // If index is at last element go to first element of array

        }
        else{
            ++i;    // All other cases go to next tab
        }

    window.location.assign(pages_arr[i]);   // Load page of the URL
}


 function resetTimer() {
     clearTimeout(t);
     t = setTimeout(next_tab, 3000)
     // 1000 milisec = 1 sec
 }

// var timer = 0;
// setInterval(function(){++timer;},1000);

// if (timer == 3 && !(window.onload ||window.onmousemove||window.onmousedown||window.ontouchstart||window.onclick||window.onscroll||window.onwheel||window.onkeypress)){
//  timer = 0;
//  next_tab();
// }
// else{
//  //idle_time();

// }

}

When you change "tabs", are you loading a completely new html page? If so, does that page also load this script? — T Porter, Oct 17 '17 at 12:17
Yes, it is loading a completely new page and yes it has the same script? — Daniel Erhabor, Oct 17 '17 at 12:19
Where is `idle_time()` being called? Possibly it happens after `onload` and since there is no interaction, `resetTimer` is never triggered, so the `setTimeout` never starts. — Manny, Oct 17 '17 at 12:32
https://stackoverflow.com/questions/667555/detecting-idle-time-in-javascript-elegantly — Taha Paksu, Oct 17 '17 at 12:51
this might help: https://stackoverflow.com/questions/667555/detecting-idle-time-in-javascript-elegantly — funcoding, Oct 17 '17 at 12:54
@DanielErhabor it's fine to call it in onload, just make sure idle_time itself calls resetTimer at the end, to make sure your setTimeout starts — Manny, Oct 17 '17 at 13:02
@Manny that worked. It basically starts of the process in case no event happens. Works exactly as should. — Daniel Erhabor, Oct 17 '17 at 13:10
@DanielErhabor cool, you can also remove the `window.onload = resetTimer;` part too just to make it a little cleaner. — Manny, Oct 17 '17 at 13:17

Malkeet Singh · Answer 1 · 2017-10-17T16:33:50.267

working demo- http://jsfiddle.net/Malkeet12/6Rm9S/27/  

var idleInterval = setInterval(timerIncrement, 3000);
  $scope.myListener = function() {
    clearInterval(idleInterval);
    // console.log('idleInterval');
    idleInterval = setInterval(timerIncrement, 3000); // 1 minute

  };
  function timerIncrement() {
    var arr = document.getElementById("someFormId").elements;
    for (var i = 0; i <= 3; i++) {
      setTimeout(function(x) {
        return function() {
          arr[x].focus();
        };
      }(i), 1000 * i);
    }

  }

How can I write a javascript function that moves between my tabs on a html webpage every few seconds if the user is idle

1 Answers1