Call Javascript Function On Every Second ( Nearly 1800 Seconds ) Settimeout & Setinterval Having Lagging Issue

I want to show login popup before 1 minute of session timeout.Max session idle timeout value is 1800 seconds ( 30 mins. ) So I used one counter variable like idlecount. Using setIn

Solution 1:

You should not use a timeout or setinterval when you want to rely on real expiring time as them are not reliable. Also, notice that a refresh cancel the setTimeout/setInterval. Instead you should use a setInterval that check every x seconds if the session has expired checking it against current Date() object.

Example:

setInterval(function(){
  var decodedToken = localStorage.getItem('user_token');
  if (decodedToken.exp < newDate().getTime()/1000) {
    // Token is expired
  }
}, 3000);

Solution 2:

I spent a few hours on that, I hope to have gratitude back ..

constDelayLimit     = 1,      // unit expressed in minutes, so, this is 1 minute.DelayChecking  = 3;     //  unit expressed in seconds, so, this is 3 seconds.functionf_Delay(ninutes2wait, seconds2Check, delayOut_fct, elapseTime_fct ) {
  let c_Delay =
  {
    rf_DelayOut      : delayOut_fct   || function(){},
    rf_ElapseTime    : elapseTime_fct || function(){},
    rf_delay         : ninutes2wait *60*1000,
    Date_Start       : Date.now(),
    Interval_ID      : null
  }

  c_Delay.Interval_ID = setInterval(function (infos) {
    let curDateDiff = Date.now() - infos.Date_Start;

    infos.rf_ElapseTime( curDateDiff );

    if (curDateDiff >= infos.rf_delay) 
    {
      infos.rf_DelayOut();
      clearInterval(infos.Interval_ID);
    }
  }, seconds2Check*1000, c_Delay );

  return c_Delay.Interval_ID;
}



functionf_DelayOut() {
  outputResp.value = "time Out !"document.querySelectorAll('#LogOn_form > input, #LogOn_form > button').forEach(e=>e.disabled=true);
}

functionf_elapseTime(milliseconds) {
  let timePass = Math.round( milliseconds / 1000 );
  outputResp.value = `time pass : ${timePass}s /  ${DelayLimit}mn`;
}

// this is the main part...var ref_LoginDelay = f_Delay(DelayLimit, DelayChecking, f_DelayOut, f_elapseTime );

  
LogOn_form.onsubmit = function(e){
  e.preventDefault();

  if (inputName.value==='MrJ' && inputPswd.value==='MrJ' ) 
  {
    clearInterval(ref_LoginDelay);
    outputResp.value = "Login success ! :)";

    // your stuffs 
  }
  else
  {
    LogOn_form.reset();
    outputResp.value = "bad Login.. :/";
    // document.querySelectorAll('#LogOn_form > input').forEach(e=>e.value='');
  }
}

cancel_bt.onclick = function()
{
  clearInterval(ref_LoginDelay);  //  = do Cancel f_Delay

  outputResp.value = "Login delay disabled"
}

form { display:block; width:24em; height:12.6em; padding: 03em; border: 1px solid grey; margin:auto  }
form > * { display:block; float:left; margin: .5em }
label, output { clear:both;}
label { width: 6em; }

<formid="LogOn_form"><h4>Please login...</h4><labelfor="inputName"  > Name : </label><inputid="inputName"type="text"placeholder="type 'MrJ'"/><labelfor="inputPswd"  > Password : </label><inputid="inputPswd"type="password"placeholder="type 'MrJ'"/><buttontype="submit">Login</button><buttontype="reset">reset</button><outputid="outputResp"></output></form><br><br><buttonid="cancel_bt">Cancel Delay</button>