如何在函数内清除此 setInterval?
Posted
技术标签:
【中文标题】如何在函数内清除此 setInterval?【英文标题】:How do I clear this setInterval inside a function? 【发布时间】:2011-02-23 11:20:59 【问题描述】:通常,我会将间隔设置为一个变量,然后像 var the_int = setInterval(); clearInterval(the_int);
一样将其清除,但为了让我的代码能够正常工作,我将它放在一个匿名函数中:
function intervalTrigger()
setInterval(function()
if (timedCount >= markers.length)
timedCount = 0;
google.maps.event.trigger(markers[timedCount], "click");
timedCount++;
, 5000);
;
intervalTrigger();
我该如何清除这个?我试了一下,并尝试var test = intervalTrigger(); clearInterval(test);
确定,但没有奏效。
基本上,一旦我的谷歌地图被点击,我需要这个停止触发,例如
google.maps.event.addListener(map, "click", function()
//stop timer
);
【问题讨论】:
【参考方案1】:setInterval
方法返回一个句柄,您可以使用该句柄来清除间隔。如果你想让函数返回它,你只需返回方法调用的结果:
function intervalTrigger()
return window.setInterval( function()
if (timedCount >= markers.length)
timedCount = 0;
google.maps.event.trigger(markers[timedCount], "click");
timedCount++;
, 5000 );
;
var id = intervalTrigger();
然后清除间隔:
window.clearInterval(id);
【讨论】:
注意:您不需要引用全局范围。setInterval
和 window.setInterval
一样好用。
明确表达通常是个好习惯。一些 linter 会抱怨隐式使用全局范围,而 window.
可以。【参考方案2】:
// Initiate set interval and assign it to intervalListener
var intervalListener = self.setInterval(function () someProcess(), 1000);
function someProcess()
console.log('someProcess() has been called');
// If some condition is true clear the interval
if (stopIntervalIsTrue)
window.clearInterval(intervalListener);
【讨论】:
【参考方案3】:the_int=window.clearInterval(the_int);
【讨论】:
【参考方案4】:我能想到的最简单的方法:添加一个类。
只需添加一个类(在任何元素上)并检查区间内是否存在。我相信,这比任何其他方式都更可靠、更可定制和跨语言。
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/unpause</button></p>
【讨论】:
以上是关于如何在函数内清除此 setInterval?的主要内容,如果未能解决你的问题,请参考以下文章
jQuery 使用 $(this) 作为 setInterval/setTimeOut 函数内的起点遍历 DOM?
A页面调用了setInterval(),如何在跳转到B页面之前清除掉setInterval??