如何在函数中清除 setInterval？

通常，我会将间隔设置为一个变量，然后像 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
});
182267 次浏览
小开
最佳答案

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);
小开 
// 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);
}
}
小开 
the_int=window.clearInterval(the_int);
小开

我能想到的最简单的方法: 添加一个类。

只需添加一个类(对于任何元素)并检查间隔内是否存在。我相信，这比其他任何方式都更可靠、更可定制和跨语言。

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">&nbsp;</p>
<button id="pauseInterval">Pause/unpause</button></p>


提交答案