在 Javascript 中使用 clearInterval 后重新启动 setInterval

Question

我正在努力让两个按钮使用 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>

Answer 1

将您的计时器启动逻辑移到它自己的函数中：

<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>

Answer 2

请在启动、停止和重新启动按钮处使用此代码，希望它有用。

如果您点击重新启动按钮，那么第一个旋转木马图像出现，这意味着工作开始了。

谢谢

<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>

在 Javascript 中使用 clearInterval 后重新启动 setInterval

Restarting setInterval after using clearInterval in Javascript

javascript

button

setinterval

clearinterval