setInterval javascript调用在ajax加载后不会消失答案

【问题标题】：setInterval javascript calls do not go away after ajax loadsetInterval javascript调用在ajax加载后不会消失
【发布时间】：2013-10-03 03:05:35
【问题描述】：

我正在使用带有部分渲染和 ajax 调用的 MVC。在我的一个结果表中，我有一个字段是计时器。

以下代码在我的局部视图上，每 30 秒呈现一次。其中一个字段是向用户显示的活动计时器：

<td><div id="@someID" class="nobutton"></div><script>setInterval(function () { startTimer('@startDateTime', '@someID') }, 500);</script></td>

这很好用，但是在进行 ajax 调用以刷新部分后，interval 函数仍在调用不再存在的旧 ID (someID)。

这是计时器的javascript：

<script type="text/javascript">
    function startTime(dt, field){
        var field = document.getElementById(field);
        if (field == null)
            return;

        var rowTime = new Date(dt);
        var rowTimems = rowTime.getTime(rowTime);

        var currentTime = new Date();
        var currentTimems = currentTime.getTime(currentTime);

        var difference = currentTimems - rowTimems;

        var hours = Math.floor(difference / 36e5),
            minutes = Math.floor(difference % 36e5 / 60000),
            seconds = Math.floor(difference % 60000 / 1000);

        field.innerHTML = formatTime(hours) + ":" + formatTime(minutes) + ":" + formatTime(seconds);
</script>

并且刷新部分的主页上的调用非常简单：

var t = setInterval(function () {
            $.ajax({
                url: "MYURL",
                type: "GET",
                cache: false,
                success: function (data) {
                    $("#summary").html(data);                    
                }
            });
        }, 30000);

有没有办法杀死老前辈？为什么它们还在运行？

【问题讨论】：

在再次进行ajax刷新之前需要清除间隔。

标签： javascript jquery ajax asp.net-mvc partial-views

【解决方案1】：

代码仍在执行的原因是间隔从未停止过。改为在您的部分中尝试此操作。它将检查上一个间隔计时器是否存在并将其清除。

<td><div id="@someID" class="nobutton"></div>
<script>
 if( window.prtInt != void 0 ) clearInterval(window.prtInt);//void 0 means undefined
 window.prtInt = setInterval(function () { startTimer('@startDateTime', '@someID') }, 500);
</script></td>

如果您希望清除整个页面上的所有计时器（可能会产生不良影响），那么您可以获取新计时器的整数，并循环到仍然存在的那个数字清除间隔。

<script>
 function clrTimers(){
  var clr = setTimeout(function(){},10);
  for( var i = 0; i < clr; i++ ){
   clearInterval(i);
  }
 }
</script>

如果您想跳过某些内容，可以在您知道它们的情况下将它们包含在 continue 关键字中。比如

for( var i = 0; i < clr; i++ ){
 if( i == t ) continue; //I believe t was your ajax interval variable
 clearInterval(i);
}

【讨论】：

我认为如果我只有 1 行数据，这会很好用。有没有办法清除所有间隔？
@PapaBurgundy - 有。但是，这也会清除您正在进行的 ajax 调用的计时器。请参阅上面的编辑。
我最终在主页上声明了一个 javascript 数组，并在构建每一行时将 setInterval 整数 ID 添加到数组中。然后在 ajax 重新加载时，我为数组中的任何 ID clearInterval。你的回答让我朝着那个方向前进，谢谢。

【解决方案2】：

setInterval(function () { startTimer('@startDateTime', '@someID') }, 500);

将继续使用相同的值执行，直到它被clearInterval() 清除。为了清除它，您需要将其保存为 var 并将其提供给 clearInterval() 函数。

【讨论】：