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!

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!

• javascript

Share Improve this question Follow edited Apr 9, 2015 at 18:13 zazvorniki asked Apr 9, 2015 at 17:34 zazvornikizazvorniki 3,6122323 gold badges7878 silver badges126126 bronze badges 5

• Are these full page naviagations? If so, navigating the page should destroy all existing intervals (it should reset the javascript runtime pletely). It looks like we're missing quite a bit of code for a diagnostic. For instance, I see you clearing an interval named counter but it's never created. – Dylan Watt Commented Apr 9, 2015 at 17:39
• It's a single page app, so while the page 'changes' it's not really changing. – zazvorniki Commented Apr 9, 2015 at 17:40
• Where is this init code run? Can you define the interval higher up, so that it's not recreated every time? – Dylan Watt Commented Apr 9, 2015 at 17:42
• @Teemu The conditions do pass. I can run through this fine on the first page many times before running into the set interval problem stated above when traveling through the pages. – zazvorniki Commented Apr 9, 2015 at 17:44
• @DylanWatt, I can't put that code any higher than it already is. I'm within backbone and it's a very plicated structure how the pages and controls are set up. – zazvorniki Commented Apr 9, 2015 at 17:45

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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);

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

The most elegant way to handle this is to implement OnDestroy and override the following method:

ngOnDestroy() {
    // stop auto refresh alerts on page exit.
    clearInterval(this.refreshInterval);
}