我如何清除这个setInterval

通常情况下，id设置的时间间隔为var，然后清除var 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地图被点击…例如

 google.maps.event.addListener(map, 'click', function() { //stop timer }); 

Answer 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); 

Answer 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); } } 

Answer 3

 the_int=window.clearInterval(the_int); 

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