如何清除这个setInterval

Normally, id set the interval to a var and then clear the var like var the_int = setInterval();clearInterval(the_int); but for my code to work i put it in an anonymous function:

通常，id将interval设置为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();

How do I clear this? I did try var test = intervalTrigger();clearInterval(test); but that didnt work. Which, i expected it not to work, but just gave it a shot.

我怎么清除这个?我尝试了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
});

4 个解决方案

#1

The setInterval method 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);

#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

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