Перезапуск setInterval после использования clearInterval в Javascript - PullRequest
Новая
       27

Перезапуск setInterval после использования clearInterval в Javascript

0 голосов
/ 23 мая 2019

Я пытаюсь сделать так, чтобы с помощью Javascript было две кнопки, одна для остановки карусели изображений с помощью clearInterval, которая работает хорошо, однако я также хочу, чтобы другая кнопка перезапускала карусель, однако я не могу понять, каксделай так. 

<img src="images/img1.jpg" id="images" width="200px">
<button type="button" id="stop">Stop the Carousel</button>
<button type="button" id="start">Start the Carousel</button>

<script>
document.getElementById('stop').addEventListener('click', stopit);

var start = 1;
var timer = setInterval(carousel, 2000);

  function carousel(){
    var image_data;
    start =  start % 5;
    image_data = "images/img" + (start+1) + ".jpg";
    document.getElementById('images').src=""+ image_data;
    start++;
  }

  function stopit(){
    clearInterval(timer);
  }

</script>

Ответы [ 2 ]

1 голос
/ 23 мая 2019

Переместите вашу логику запуска таймера на собственную функцию: 

<img src="images/img1.jpg" id="images" width="200px">
<button type="button" id="stop">Stop the Carousel</button>
<button type="button" id="start">Start the Carousel</button>

<script>
document.getElementById('stop').addEventListener('click', stopit);
document.getElementById('start').addEventListener('click', startIt);
var start = 1;
var timer

  function carousel(){
    var image_data;
    start =  start % 5;
    image_data = "images/img" + (start+1) + ".jpg";
    document.getElementById('images').src=""+ image_data;
    start++;
  }
  function startIt(){
     if(timer) stopit()
     timer = setInterval(carousel, 2000);
  }
  function stopit(){
    clearInterval(timer);
  }
  startIt() //if you want it to start automatically
</script>
0 голосов
/ 23 мая 2019

Пожалуйста, используйте этот код для запуска, остановки и перезапуска кнопки. Надеюсь, она будет полезна.

Если вы нажмете кнопку перезапуска, то появится первое изображение карусели, означающее, что оно начало работы.

Спасибо 

<img src="images/img1.jpg" id="images" width="200px">
<button type="button" id="stop">Stop the Carousel</button>
<button type="button" id="start">Start the Carousel</button>
<button type="button" id="restart">Restart the Carousel</button>

<script>
document.getElementById('stop').addEventListener('click', stopit);
document.getElementById('restart').addEventListener('click', restart);
document.getElementById('start').addEventListener('click', start);

    var start = 1;
    var timer = setInterval(carousel, 2000);

      function carousel(){
        var image_data;
        start =  start % 5;
        image_data = "images/img" + (start+1) + ".jpg";
        document.getElementById('images').src=""+ image_data;
        start++;
      }

      function stopit(){
        clearInterval(timer);
      }
      function start(){
        timer = setInterval(carousel, 2000);
      }
      function restart(){
        start = 1;
         timer = setInterval(carousel, 2000);
      }
    </script>
...