Javascript 如何在函数内清除此 setInterval？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2901108/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I clear this setInterval inside a function?
提问by Oscar Godson
Normally, I'd set the interval to a variable and then clear it like var the_int = setInterval(); clearInterval(the_int);but for my code to work I put it in an anonymous function:
通常，我会将间隔设置为一个变量，然后将其清除，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();
How do I clear this? I gave it a shot and tried var test = intervalTrigger(); clearInterval(test);to be sure, but that didn't work.
我如何清除这个？我试了一下，试图var test = intervalTrigger(); clearInterval(test);确定，但这没有用。
Basically, I need this to stop triggering once my Google Map is clicked, e.g.
基本上，一旦我的谷歌地图被点击，我需要这个停止触发，例如
google.maps.event.addListener(map, "click", function() {
//stop timer
});
回答by Guffa
The setIntervalmethod returns a handle that you can use to clear the interval. If you want the function to return it, you just return the result of the method call:
该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();
Then to clear the interval:
然后清除间隔：
window.clearInterval(id);
回答by Marian Zburlea
// 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);
}
}
回答by Anup
the_int=window.clearInterval(the_int);
回答by Aart den Braber
Simplest way I could think of: add a class.
我能想到的最简单的方法：添加一个类。
Simply add a class (on any element) and check inside the interval if it's there. This is more reliable, customisable and cross-language than any other way, I believe.
只需添加一个类（在任何元素上）并检查间隔内是否存在。我相信，这比任何其他方式都更可靠、可定制和跨语言。
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>