按下特定按鈕時如何清除setInterval？

Question

我很難找到一個解決方案，該解決方案是在單擊特定按鈕（帶有“下一個”類）時如何清除setInterval。 我的代碼在下面列出，我剛開始學習js和jquery，所以它的狀態可能不好。

<script>
    var slideIndex = 1;
    showSlides(slideIndex);

    function plusSlides(n) {
        showSlides(slideIndex += n);
    }

    function showSlides(n) {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        if (n > slides.length) {slideIndex = 1}    
        if (n < 1) {slideIndex = slides.length}
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";  
        }
        slides[slideIndex-1].style.display = "block";  
    }

    $(document).ready(function(){
         function playslider(){
              $('.next').trigger('click');
              var x = setTimeout(function(){playslider()}, 5000);
         }
         playslider();  <!--To loop-->
    });
</script>

另外，如果您不介意幫助我，如何在頁面加載后5秒鍾內進行首次單擊。

編輯：詳細說明，以便您對我在做什么以及需要什么幫助有更深入的了解。 我正在創建一個簡單的自動圖片幻燈片，它具有“下一個”和“上一個”按鈕。 當按下“下一個”或“上一個”按鈕時，我想取消setInterval（與setTimout一起使用）。 而且，我很難確定要在哪里放置代碼以及如何清除setInterval時間，同時又轉到下一張圖片。

Answer 1

1. 您以不健康的方式混合使用jQuery和DOM var slides = $(".mySlides");
2. 如果使用setInterval，則正在尋找clearInterval；如果使用setTimeout，則正在尋找clearTimeout

要延遲執行，請使用頁面加載：

var tId ;
function playslider(){
  $('.next').trigger('click');
}
$(function() {
 tId = setInterval(playslider,5000); // can be stopped with clearInterval(tId);
});

Answer 2

您實際上是在使用setTimeout ，而不是setInterval 。

您可以使用clearTimeout(id)取消超時

您也可以使用setInterval代替：

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
    showSlides(slideIndex += n);
}

function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    if (n > slides.length) {slideIndex = 1}    
    if (n < 1) {slideIndex = slides.length}
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";  
    }
    slides[slideIndex-1].style.display = "block";  
}

$(document).ready(function(){
     var intervalId = null;
     function enablePlayback(){
          if(intervalId == null) {
            setInterval(function() {
              $('.next').trigger('click'); // you should implement this differently, as this is bad practice.
            }, 5000);
          }
     }
     function disablePlayback() {
          if(intervalId != null) {
            clearInterval(intervalId);
            intervalId = null;
          }
     }
     enablePlayback();  <!--To loop-->
     $('#ButtonToDisable').click(function() { disablePlayback(); });
     $('#ButtonToEnable').click(function() { enablePlayback(); });
});