SetInterval在更改页面时保持设置

Question

So, I have a JavaScript issue that is probably as old as time, but I can't seem to figure it out. I have a form that takes up the whole page and has next and back buttons so the user can travel back and forth through the questions. ( Single page app , no full refresh. If there was this would be easy!)

One of the requirements is to have a timeout function. So after they are idle after a cretin amount of time it logs them out to protect their information. The issue is that my interval keeps adding a new one every time I flip back and forth new pages. Thus creating multiple timers and insanity.

My code kind of looks like this.

 var idle = 0;
 var idleIntervalTimer = setInterval(timerIncrement, 1000); //This is what keeps being called
 var counter = 0;
 var timeout = 30;
 var count = 20;
 var resetCount = 20;

document.onmousemove = function() {
  if(app.timer.get('available') === 'Yes'){ //I'm just using this to make sure that they have not already been logged out
       count = resetCount;
       idle = 0;
       app.warning.close();
    }
};

function timerIncrement() {
  if(app.timer.get('available') === 'Yes'){
     console.log(idle);
     idle = idle + 1;

     if (idle > 19 && count >= 0) { 
        count = count;
        app.warning.show({ //This is just a warning message that shows up at the top of the page counting down before the app closes.
           message: 'Logging out in <span class="warn">' + count + '</span> seconds.'
        });

      if(count != null || count >= 0){
          count=count-1;

         if (count === 0 && count != 'null'){
             resetTimer();
             app.workflow.resetWorkflow();
         }
       }
     }
   }
 }


function resetTimer(){
   count = resetCount;
   idle = 0;
   clearInterval(counter);
   clearInterval(idleIntervalTimer);
    app.warning.close();
}

I have tried a few different things. One being that I would set a blank variable at the top and use that blank variable to set the interval, but that didn't seem to work. I have also tried to detect if the interval was still active, but I don't really want to clear the interval, just not create another. Some help would be apprenticed very much!

Answer 1

I'm assuming that code gets called on every page flip. Don't set the interval timer immediately. You should create a function that will first clear it and then set.

For example do this instead:

var idleIntervalTimer;

function initIdleIntervalTimer(){
 clearInterval(idleIntervalTimer);
 idleIntervalTimer = setInterval(timerIncrement, 1000);
}

initIdleIntervalTimer();

Or try switching it the timer to the global scope, get rid of var idleIntervalTimer and do this:

clearInterval(window.idleIntervalTimer);
window.idleIntervalTimer = setInterval(timerIncrement, 1000);

Answer 2

It's a little ugly, but

 window.clearInterval(localStorage['idleInterval'])
 var idleIntervalTimer = setInterval(timerIncrement, 1000); //This is what keeps being called
 window.localStorage['idleInterval'] = idleIntervalTimer;

EDIT: If you dont want to clear, wrap the entire init in a flag, eg

if (!window._intervalInitOccured){
    window._intervalInitOccured = true;
    //continue init