Home / Questions / 344827
Accepted
Narciso Aifuz
Asked: 2020-04-10 15:08:49 +0800 CST 2020-04-10 15:08:49 +0800 CST

How can I suspend a setInterval in action?

  • 772

Create an HTML5 document to watch local videos. I try to make it similar to YouTube, at the end of the video, it shows a similar video suggestion and the next video to play with setInterval. My problem still, failed to stop the setIntervalto replay the video.

  // AL FINAL DEL VIDEO
  var mas = $('.relacionados');
  var fin = $('video');
  var counter=10;

  $("video").on("ended", function() { 
   mas.show();

  //Siguiente vídeo
  setTimeout (function() {
  window.location.href = 'yoVideos.html';  
  },10000);
  //Cuenta regresiva
  var id = setInterval(function(){ 
  if(counter==0) clearInterval(id); 
  else { 
  counter=counter-1; 
  document.querySelector('.counter').innerHTML=counter;  
  } }, 1000);

  });

  // CANCELAR SIGUIENTE VIDEO
  function cancelar() {
    clearTimeout(fin);
    mas.toggle();
    document.getElementById("cancelar"); 
  }

  <div class="detalles">
    <span>Siguente vídeo:</span>
      <h3>Título del siguiente vídeo</h3>   
    <span>En: <b class="counter">10</b>s
      <span class="cancelar" onclick="cancelar()">Cancelar</span>
    </span>     
  </div>
html5

1 Answers

  1. Best Answer

    var counter = 5;

var id = setInterval(function(){
if(counter == 0){
clearInterval(id);
document.
}
document.getElementById("contador").innerHTML = counter;

counter--;

},1000);
    <div id="contador"></div>

    You can put the setTimeout code inside the setInterval since they both end at the same time:

    var id = setInterval(function(){ 
  if(counter==0) {
    clearInterval(id);
    window.location.href = 'yoVideos.html'; 
  }
  else { 
   counter=counter-1; 
   document.querySelector('.counter').innerHTML=counter;  
  }
 }, 1000);

    And in the function cancelar()you cancel the setInterval:

    function cancelar() {
    clearInterval(id);
    mas.toggle();
    document.getElementById("cancelar"); 
  }

    Example:

    var counter = 5;

var id = setInterval(function(){
if(counter == 0){
clearInterval(id);
//document.location.href="";
}
document.getElementById("contador").innerHTML = counter;

counter--;

},1000);

function cancelar(){

clearInterval(id);

}
    <div id="contador"></div>

<button onclick="cancelar()">cancelar</button>

    • 1