每秒（近 1800 秒）调用 javascript 函数 setTimeout 和 setInterval 有滞后问题答案

【问题标题】：Call javascript function on every second ( nearly 1800 seconds ) setTimeout & setInterval having lagging issue每秒（近 1800 秒）调用 javascript 函数 setTimeout 和 setInterval 有滞后问题
【发布时间】：2019-03-18 11:29:10
【问题描述】：

我想在会话超时 1 分钟之前显示登录弹出窗口。最大会话空闲超时值为 1800 秒（30 分钟）。所以我使用了一个计数器变量，例如 idlecount。使用 setInterval() 我正在增加该变量值。所以现在当变量值为 1740（即我的空闲会话超时值 1800 - 60 秒）时，我将显示登录弹出窗口（有 2 个按钮 (1) 让我登录 (2) 退出）。问题是 setInterval() 没有正确维护变量 idlecount 的值。由于该登录弹出窗口无法正常工作。

【问题讨论】：

请阅读How to Ask。这里几乎没有任何问题。在标题中您提到了一些“滞后”，但您的实际问题除了您想要之外没有包含任何实际信息（并且只告诉我们这还不够。）
@04FS ：我已经编辑了这个问题。我想现在理解就够了。
请对我的回答做出回报，还是我应该认为它是空的并且这项工作毫无用处？

标签： javascript php

【解决方案1】：

当您想依赖实际到期时间时，不应使用 timeout 或 setinterval，因为它们不可靠。另外，请注意刷新会取消 setTimeout/setInterval。相反，您应该使用 setInterval 每隔 x 秒检查一次会话是否已过期，并针对当前的 Date() 对象进行检查。

例子：

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

【讨论】：

You should not use a timeout or setinterval 然后Instead you should use a setInterval 我明白你的意思（不要将setInterval 设置为1800 秒），但你能否在你的回答中更清楚一点。跨度>
@Mose Raguzzini：您好，感谢您的回复。你能不能给我一个简单的例子。
@George thanx，但我认为 OP 明白了
@Milind 我用通用的 sn-p 更新了答案
@MosèRaguzzini：谢谢。今天我编辑了我的问题。请问，你能再看一遍吗？

【解决方案2】：

我为此花了几个小时，希望能得到回报..

const
  DelayLimit     = 1,      // unit expressed in minutes, so, this is 1 minute.
  DelayChecking  = 3;     //  unit expressed in seconds, so, this is 3 seconds.


function f_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;
}



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

function f_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: 0 3em; border: 1px solid grey; margin:auto  }
form > * { display:block; float:left; margin: .5em }
label, output { clear:both;}
label { width: 6em; }

<form id="LogOn_form">
  <h4>Please login...</h4>
  <label for="inputName"  > Name : </label>
  <input  id="inputName"  type="text"placeholder="type 'MrJ'"/>
  <label for="inputPswd"  > Password : </label>
  <input  id="inputPswd"  type="password" placeholder="type 'MrJ'"/> 
  <button type="submit">Login</button>
  <button type="reset">reset</button>
  <output id="outputResp"></output>
</form>

<br>  <br>
<button id="cancel_bt">Cancel Delay</button>

【讨论】：