我setInterval(fname, 10000);在 JavaScript 中每 10 秒调用一次函数。是否可以在某些事件上停止调用它？
我希望用户能够停止重复刷新数据。
cnu
问问题
1177616 次
16 回答
2494
setInterval()返回一个间隔 ID，您可以将其传递给clearInterval()：
var refreshIntervalId = setInterval(fname, 10000);
/* later */
clearInterval(refreshIntervalId);
请参阅 和 的setInterval()文档clearInterval()。
于 2008-09-20T19:30:59.243 回答
124
如果将返回值设置setInterval为变量，则可以使用clearInterval停止它。
var myTimer = setInterval(...);
clearInterval(myTimer);
于 2008-09-20T19:32:06.667 回答
63
您可以设置一个新变量，并在每次运行时将其递增 ++（向上计数），然后我使用条件语句来结束它：
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);
});
我希望它有所帮助，而且它是正确的。
于 2010-05-16T14:02:25.653 回答
14
上面的答案已经解释了 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>
由于该函数是在按钮单击处理程序中定义的，因此您不必再次定义它。如果再次单击该按钮，则可以恢复计时器。
于 2014-01-19T05:46:41.267 回答
11
已经回答...但是如果您需要一个特色的、可重复使用的计时器，它还支持不同时间间隔的多个任务，您可以使用我的TaskTimer（用于节点和浏览器）。
// Timer with 1000ms (1 second) base interval resolution.
const timer = new TaskTimer(1000);
// Add task(s) based on tick intervals.
timer.add({
id: 'job1', // unique id of the task
tickInterval: 5, // run every 5 ticks (5 x interval = 5000 ms)
totalRuns: 10, // run 10 times only. (omit for unlimited times)
callback(task) {
// code to be executed on each run
console.log(task.name + ' task has run ' + task.currentRuns + ' times.');
// stop the timer anytime you like
if (someCondition()) timer.stop();
// or simply remove this task if you have others
if (someCondition()) timer.remove(task.id);
}
});
// Start the timer
timer.start();
在您的情况下，当用户单击干扰数据刷新时；如果他们需要重新启用，您也可以致电timer.pause()then 。timer.resume()
在这里查看更多。
于 2016-08-23T15:14:22.340 回答
9
clearInterval() 方法可用于清除使用 setInterval() 方法设置的计时器。
setInterval 总是返回一个 ID 值。可以在 clearInterval() 中传递此值以停止计时器。这是一个从 30 开始并在变为 0 时停止的计时器示例。
let time = 30;
const timeValue = setInterval((interval) => {
time = this.time - 1;
if (time <= 0) {
clearInterval(timeValue);
}
}, 1000);
于 2019-05-31T05:12:28.143 回答
7
@cnu，
您可以停止间隔，在查看控制台浏览器（F12）之前尝试运行代码...尝试评论 clearInterval(trigger) 再次查看控制台，而不是美化器？: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>于 2016-01-08T17:30:19.380 回答
4
这就是我使用 clearInterval() 方法在 10 秒后停止计时器的方式。
function startCountDown() {
var countdownNumberEl = document.getElementById('countdown-number');
var countdown = 10;
const interval = setInterval(() => {
countdown = --countdown <= 0 ? 10 : countdown;
countdownNumberEl.textContent = countdown;
if (countdown == 1) {
clearInterval(interval);
}
}, 1000)
}<head>
<body>
<button id="countdown-number" onclick="startCountDown();">Show Time </button>
</body>
</head>于 2019-07-15T14:12:46.030 回答
3
声明变量以分配从 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
});
于 2017-10-17T20:15:42.393 回答
3
在 nodeJS 中，您可以在 setInterval 函数中使用“ this ”特殊关键字。
您可以使用此关键字来清除Interval，这是一个示例：
setInterval(
function clear() {
clearInterval(this)
return clear;
}()
, 1000)
当您在函数中打印此特殊关键字的值时，您会输出一个 Timeout 对象 Timeout {...}
于 2020-09-14T22:34:52.617 回答
3
清除间隔（）
请注意，您可以使用此功能启动和暂停您的代码。这个名字有点欺骗性，因为它说的是 CLEAR，但它并没有清除任何东西。它实际上暂停了。
使用此代码进行测试：
HTML：
<div id='count'>100</div>
<button id='start' onclick='start()'>Start</button>
<button id='stop' onclick='stop()'>Stop</button>
JavaScript：
let count;
function start(){
count = setInterval(timer,100) /// HERE WE RUN setInterval()
}
function timer(){
document.getElementById('count').innerText--;
}
function stop(){
clearInterval(count) /// here we PAUSE setInterval() with clearInterval() code
}于 2020-11-05T07:41:25.410 回答
1
使用 setTimeOut 在一段时间后停止间隔。
var interVal = setInterval(function(){console.log("Running") }, 1000);
setTimeout(function (argument) {
clearInterval(interVal);
},10000);
于 2019-10-21T09:01:05.053 回答
1
很多人都给出了他们很好的答案，clearInterval是正确的解决方案。
但我认为我们可以做更多，让我们的编辑器使用 javascript 计时器强制执行最佳实践。
setTimeout忘记清除或设置的计时器总是很容易setInterval，这可能会导致难以发现的错误。
所以我为上面的问题创建了一个 eslint 插件。
于 2021-04-03T04:33:10.843 回答
0
我想下面的代码会有所帮助：
var refreshIntervalId = setInterval(fname, 10000);
clearInterval(refreshIntervalId);
你做的代码 100% 正确......所以......有什么问题？或者是教程...
于 2020-05-19T07:47:43.577 回答
0
尝试
let refresch = ()=> document.body.style= 'background: #'
+Math.random().toString(16).slice(-6);
let intId = setInterval(refresch, 1000);
let stop = ()=> clearInterval(intId);body {transition: 1s}<button onclick="stop()">Stop</button>于 2020-09-08T20:13:43.270 回答
-2
为什么不使用更简单的方法？加一门课！
只需添加一个告诉间隔不要做任何事情的类。例如：悬停时。
var i = 0;
this.setInterval(function() {
if(!$('#counter').hasClass('pauseInterval')) { //only run if it hasn't got this class 'pauseInterval'
console.log('Counting...');
$('#counter').html(i++); //just for explaining and showing
} else {
console.log('Stopped counting');
}
}, 500);
/* In this example, I'm adding a class on mouseover and remove it again on mouseleave. You can of course do pretty much whatever you like */
$('#counter').hover(function() { //mouse enter
$(this).addClass('pauseInterval');
},function() { //mouse leave
$(this).removeClass('pauseInterval');
}
);
/* Other example */
$('#pauseInterval').click(function() {
$('#counter').toggleClass('pauseInterval');
});body {
background-color: #eee;
font-family: Calibri, Arial, sans-serif;
}
#counter {
width: 50%;
background: #ddd;
border: 2px solid #009afd;
border-radius: 5px;
padding: 5px;
text-align: center;
transition: .3s;
margin: 0 auto;
}
#counter.pauseInterval {
border-color: red;
}<!-- you'll need jQuery for this. If you really want a vanilla version, ask -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="counter"> </p>
<button id="pauseInterval">Pause</button></p>多年来，我一直在寻找这种快速简便的方法，因此我发布了几个版本，以向尽可能多的人介绍它。
于 2015-04-27T18:04:30.957 回答