题 在JavaScript中停止setInterval调用


我在用 setInterval(fname, 10000); 在JavaScript中每10秒调用一次函数。是否有可能在某些事件上停止调用它?

我希望用户能够停止重复刷新数据。


1121
2017-09-20 19:29


起源


@CherryDT - 零努力问题和零努力答案出了什么问题?如果我和其他开发人员在一个房间里,我说“嘿,用于停止setInterval的JavaScript函数是什么?”如果没人知道,他们就不会回答(除了耸耸肩,说“我不记得了”)。如果有人这样做,他们会。它节省了我几分钟。 Stack Overflow只是让整个世界大小的房间。这很可爱!为什么试着让它只有难题呢?这对我来说似乎很愚蠢和毫无意义。 - Shavais
不要成为仇敌。 - Jus10


答案:


setInterval() 返回一个间隔ID,您可以传递给它 clearInterval()

var refreshIntervalId = setInterval(fname, 10000);

/* later */
clearInterval(refreshIntervalId);

请参阅文档 setInterval() 和 clearInterval()


1756
2017-09-20 19:30



用'clearInterval()'停止后怎么能再次启动它?如果我尝试重新启动它,我会运行setInterval 2倍。 - Dan
我也是每次我想使用SetInterval(MyFunction,4000);它变得越来越快,每次快2倍:(我怎么能重启一个setinterval? - Alireza Masali
SetInterval()不会更改传递的速度。如果每次调用SetInterval()时它正在加速,那么你有多个同时运行的定时器,并且应该打开一个新问题。 - EpicVoyage
确保你真的停止它。由于变量范围,您可能没有正确的ID来调用 clearInterval。我用过 window.refreshIntervalId 而不是局部变量,它工作得很好! - osa
我不能用 this 在 - 的里面 fname? - Jürgen Paul


如果设置返回值 setInterval 到变量,你可以使用 clearInterval 阻止它。

var myTimer = setInterval(...);
clearInterval(myTimer);

92
2017-09-20 19:32





您可以设置一个新变量,并在每次运行时将其递增++(向上计数),然后我使用条件语句来结束它:

var intervalId = null;
var varCounter = 0;
var varName = function(){
     if(varCounter <= 10) {
          varCounter++;
          /* your code goes here */
     } else {
          clearInterval(intervalId);
     }
};

$(document).ready(function(){
     intervalId = setInterval(varName, 10000);
});

我希望它有所帮助,这是对的。


35
2018-05-16 14:02



我很惊讶地发现这很有效 clearInterval(varName);。我期望 clearInterval 传递函数名称时不工作,我认为它需要间隔ID。我想这只有在你有一个命名函数时才能工作,因为你不能将匿名函数作为变量传递给它自己。 - Patrick M
其实我认为它不起作用。由于计数器的限制,代码停止执行,但是间隔保持触发varName()。尝试在clearInterval()之后记录任何内容(在else子句中),你将看到它永远被写入。 - Rafael Oliveira
$(document).ready(function(){ }); 是jQuery,这就是为什么它不起作用。至少应该提到这一点。 - poepje
@OMGrant,除了一个不起作用的例子,你有一个名为的变量 varName,它存储一个未命名的函数 - w ?? ??你应该改变或取消这个答案,恕我直言。 - Dean Radcliffe
不要懦弱,花费宝贵的积分来推翻这个错误的答案。 - Motes


上面的答案已经解释了setInterval如何返回句柄,以及如何使用此句柄取消Interval计时器。

一些架构考虑:

请不要使用“无范围”变量。最安全的方法是使用DOM对象的属性。最简单的地方是“文件”。如果通过启动/停止按钮启动刷新,您可以使用按钮本身:

<a onclick="start(this);">Start</a>

<script>
function start(d){
    if (d.interval){
        clearInterval(d.interval);
        d.innerHTML='Start';
    } else {
        d.interval=setInterval(function(){
          //refresh here
        },10000);
        d.innerHTML='Stop';
    }
}
</script>

由于函数是在按钮单击处理程序中定义的,因此您不必再次定义它。如果再次单击该按钮,则可以恢复计时器。


10
2018-01-19 05:46



穿上它有什么好处 document 而不是 window? - icktoofay
更正。我的意思是说document.body。在我的代码示例中,我实际上正在使用按钮本身。按钮没有ID,但“this”指针绑定到函数中的“d”参数。使用“窗口”作为范围是有风险的,因为功能也存在。例如,“function test(){}”可以通过window.test访问,这与完全不使用范围相同,因为它是一种简写。希望这可以帮助。 - Schien
不要丢失“无范围”变量 - >不要使用“范围少”我会编辑它,但更改小于6个字母,并且错误令人困惑。 - Leif Neland
纠正。谢谢你抓住了。 - Schien
你不需要DOM。只是我们一个IIFE,以避免全球范围的污染。 - Onur Yıldırım


@cnu,

你可以停止间隔,当试试运行代码之前看看你的控制台浏览器(F12)...尝试注释clearInterval(触发器)再看一个控制台,而不是美化? :P

检查示例来源:

var trigger = setInterval(function() { 
  if (document.getElementById('sandroalvares') != null) {
    document.write('<div id="sandroalvares" style="background: yellow; width:200px;">SandroAlvares</div>');
    clearInterval(trigger);
    console.log('Success');
  } else {
    console.log('Trigger!!');
  }
}, 1000);
<div id="sandroalvares" style="background: gold; width:200px;">Author</div>


4
2018-01-08 17:30





已经回答了......但如果您需要一个功能强大,可重复使用的计时器,它还支持不同时间间隔的多个任务,您可以使用我的 TaskTimer (用于节点和浏览器)。

// Timer with 1000ms (1 second) base interval resolution.
var timer = new TaskTimer(1000);

// Add task(s) based on tick intervals.
timer.addTask({
    name: 'job1',       // unique name of the task
    tickInterval: 5,    // run every 5 ticks (5 x interval = 5000 ms)
    totalRuns: 10,      // run 10 times only. (set to 0 for unlimited times)
    callback: function (task) {
        // code to be executed on each run
        console.log(task.name + ' task has run ' + task.currentRuns + ' times.');
    }
});

// Start the timer
timer.start();

在您的情况下,当用户点击扰乱数据刷新时;你可以打电话 timer.pause() 然后 timer.resume() 如果他们需要重新启用。

看到 更多在这里


4
2017-08-23 15:14





声明变量以赋予从setInterval(...)返回的值 并将赋值的变量传递给clearInterval();

例如

var timer, intervalInSec = 2;

timer = setInterval(func, intervalInSec*1000, 30 ); // third parameter is argument to called function 'func'

function func(param){
   console.log(param);
}

//您可以访问的任何地方 计时器 上面声明的是clearInterval

$('.htmlelement').click( function(){  // any event you want

       clearInterval(timer);// Stops or does the work
});

0
2017-10-17 20:15