Как очистить этот 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, например.

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

javascript dom-events settimeout
person Oscar Godson    schedule 24.05.2010    source источник

Ответы (2)


arrow_upward
267
arrow_downward

Метод 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);
person Guffa    schedule 24.05.2010
comment
примечание: вам не нужно ссылаться на глобальную область. setInterval работает так же хорошо, как window.setInterval. - person Samy Bencherif; 06.07.2017
comment
Часто бывает полезно быть явным. Некоторые линтеры будут жаловаться на неявное использование глобальной области видимости, тогда как window. в порядке. - person Steve Bennett; 29.10.2020

arrow_upward
-4
arrow_downward

Самый простой способ, который я мог придумать: добавить класс.

Просто добавьте класс (для любого элемента) и проверьте внутри интервала, есть ли он там. Я считаю, что это более надежный, настраиваемый и кросс-язычный способ, чем любой другой.

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>

person Aart den Braber    schedule 27.04.2015