Javascript 更改页面时，SetInterval保持设置

所以，我有一个JavaScript问题，可能和时间一样古老，但我似乎无法解决它。我有一个表单，它占据了整个页面，并且有“下一步”和“上一步”按钮，用户可以在问题中来回移动。（单页应用程序，没有完全刷新。如果有，这将很容易！）

要求之一是具有超时功能。因此，在他们空闲一段时间后，它会将他们注销以保护他们的信息。问题是，每次我来回翻页时，我的间隔都会不断地添加一个新的间隔。因此，创造了多个计时器和疯狂

我的代码有点像这样

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

var idle=0；
var idleIntervalTimer=setInterval（时间增量，1000）//这就是人们常说的
var计数器=0；
var超时=30；
var计数=20；
var重置计数=20；
document.onmousemove=函数（）{
如果（app.timer.get（'available'）='Yes'）{//我只是用这个来确保他们还没有被注销
计数=重置计数；
空闲=0；
app.warning.close（）；
}
};
函数timerIncrement（）{
if（app.timer.get（'available'）='Yes'）{
控制台日志（空闲）；
怠速=怠速+1；
如果（空闲>19&&count>=0）{
计数=计数；
app.warning.show（{//）这只是一条警告消息，在应用程序关闭前，它会显示在页面顶部的倒计时。
消息：“在“+count+”秒内注销。”
});
如果（计数！=null | |计数>=0）{
计数=计数-1；
if（count==0&&count！='null'）{
重置计时器（）；
app.workflow.resetWorkflow（）；
}
}
}
}
}
函数resetTimer（）{
计数=重置计数；
空闲=0；
清除间隔（计数器）；
clearInterval（idleIntervalTimer）；
app.warning.close（）；
}

---

我试过几种不同的方法。一个是，我会在顶部设置一个空白变量，并使用该空白变量设置间隔，但这似乎不起作用。我还试图检测间隔是否仍然处于活动状态，但我并不想清除间隔，只是不想创建另一个间隔。一些帮手会成为学徒的

有点难看，但是

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

编辑：如果你不想清除，把整个初始化包在一个标志中，例如

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

---

我假设每次翻页都会调用代码。不要立即设置间隔计时器。您应该创建一个函数，首先清除它，然后设置它

例如，请改为执行以下操作：

var idleIntervalTimer;

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

initIdleIntervalTimer();

或者尝试将其从计时器切换到全局范围，去掉var idleIntervalTimer并执行以下操作：

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

---

这些是全页导航吗？如果是这样，导航页面应该会破坏所有现有的间隔（它应该完全重置javascript运行时）。看起来我们缺少了很多诊断代码。例如，我看到您正在清除一个名为

counter

的间隔，但它从未创建过。它是一个单页应用程序，因此当页面“更改”时，它并没有真正更改。该初始化代码在哪里运行？你能不能定义更高的间隔，这样就不会每次都重新创建它？@Teemu条件确实通过了。我可以在第一页上反复阅读这段代码，然后在阅读这些页面时遇到上面提到的设置间隔问题。@DylanWatt，我不能把代码放得比现在更高了。我在主干网中，页面和控件是如何设置的，这是一个非常复杂的结构。我并不想清除间隔，只是不想称之为一百万次。nd丑恶是可以的，只要它工作！：）鼠标移动不再有效有什么原因吗？它正在倒计时，但我无法让鼠标移动来重置它。还有，你把东西放在窗口上有什么原因吗？我把它放在窗口上是因为你需要访问某种更高的作用域，可以在“重新加载”时记住状态。我更喜欢比全局更好的东西，但是你说你不能访问你应用程序中更高的范围。我们的选项是全局（窗口）、本地存储，或者cookie。localStorage和Cookie会在实际页面加载时记住，这意味着您不会在实际需要时重新加载。所以window似乎是您可以用于此操作的“最低”范围。我不知道为什么mousemove代码坏了，是不是在init内部，init运行正确（console.log）？我认为问题的核心是这里的代码是应用程序级的，但是你把它放在一个用于部分视图的控制器中，这就是为什么（我假设）它正在运行的原因。好的解决方案是让代码控制应用程序在应用程序级控制器中运行。任何其他的东西都会有点不正常（很好，我们都有过），并且会涉及到在全局范围上放置标志之类的东西。这个解决方案仍然在创建大量的间隔。每个页面是否在自己的范围内运行这些代码？如果是这样，您将需要代码来清除正在离开的页面上的间隔。或者确保此代码是应用程序的全局代码。它是一个单页应用程序。每次他们更改页面，从数据库中获取正确的变量和所需的内容时，都会运行该程序。我知道这是一个SPA。我想知道是否每次页面更改时都要创建此代码的多个实例。因为这段代码破坏了原来的计时器，然后创建了一个新的计时器。因此，只要应用程序只使用idleIntervalTimer的一个实例，就无法创建多个INTERVAL。我不相信我正在创建多个代码实例。它是如何工作的，我单击“下一步”，它将在该视图中运行，在afterRender函数中设置所有内容，包括该代码，然后当您单击“下一步”时，它将在同一视图中运行以再次创建它。我不知道为什么，但即使设置上面的clearInterval，仍然会创建多个实例。