¿Cómo borro este setInterval dentro de una función?

2 minutos de lectura

avatar de usuario
Óscar ahijado

Normalmente, establecería el intervalo en una variable y luego lo borraría como var the_int = setInterval(); clearInterval(the_int); pero para que mi código funcione lo puse en una función anónima:

function intervalTrigger() {
  setInterval(function() {
    if (timedCount >= markers.length) {
      timedCount = 0;
    }

    google.maps.event.trigger(markers[timedCount], "click");
    timedCount++;
  }, 5000);
};

intervalTrigger();

¿Cómo borro esto? Le di una oportunidad e intenté var test = intervalTrigger(); clearInterval(test); para estar seguro, pero eso no funcionó.

Básicamente, necesito que esto deje de activarse una vez que se hace clic en mi mapa de Google, por ejemplo

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

Él setInterval El método devuelve un identificador que puede usar para borrar el intervalo. Si desea que la función lo devuelva, simplemente devuelva el resultado de la llamada al método:

function intervalTrigger() {
  return window.setInterval( function() {
    if (timedCount >= markers.length) {
       timedCount = 0;
    }
    google.maps.event.trigger(markers[timedCount], "click");
    timedCount++;
  }, 5000 );
};
var id = intervalTrigger();

Luego para borrar el intervalo:

window.clearInterval(id);

  • nota: no necesita hacer referencia al alcance global. setInterval funciona tan bien como window.setInterval.

    – Samie Bencherif

    6 de julio de 2017 a las 3:37

  • A menudo es una buena práctica ser explícito. Algunos linters se quejarán del uso implícito del alcance global, mientras que window. está bien

    –Steve Bennett

    29 de octubre de 2020 a las 4:41

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

La forma más simple que se me ocurrió: agregar una clase.

Simplemente agregue una clase (en cualquier elemento) y verifique dentro del intervalo si está allí. Esto es más confiable, personalizable y multilingüe que cualquier otra forma, creo.

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>

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad