圖像 Slider 由於錯誤的延遲而無法工作 Javascript

Question

下面是我的圖像 slider 的代碼：

var slideIndex = 0;
var slides = document.getElementsByClassName("mySlides");
showSlides();
function showSlides() {    
    var i;    
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none"; 
    }
    slideIndex++;
    if (slideIndex> slides.length) {slideIndex = 1} 
    slides[slideIndex-1].style.display = "block"; 
    setTimeout(showSlides, 3000); // Change image every 5 seconds
}
function currentSlide(no) {
    var i;    
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none"; 
    }
    slideIndex = no;
    slides[no-1].style.display = "block";
}
function plusSlides(n) {
    var newslideIndex = slideIndex + n;
    if(newslideIndex < 4 && newslideIndex > 0){
        currentSlide(newslideIndex);
    }
}

顯示圖像后，每張圖像之間會有 3 秒的延遲。 我有能力點擊一個按鈕來獲得一個特定的圖像。 這里發生的是圖像之間的延遲不會重新啟動，有時我會在半秒內顯示 2 張圖像而不是 3 張。

我怎樣才能解決這個問題？

<button class="w3-button w3-black w3-display-left" onclick="plusSlides(-1)">&#10094;</button>
<button class="w3-button w3-black w3-display-right" onclick="plusSlides(1)">&#10095;</button>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span> 
<span class="dot" onclick="currentSlide(2)"></span> 
<span class="dot" onclick="currentSlide(3)"></span>

這些是我的按鈕。

Answer 1

即使您單擊您擁有的按鈕，從您的showSlides function 調用的超時將繼續自行滴答。 您必須在單擊時手動重置它。 為此，您需要執行以下操作：

1. 聲明一個變量，如您的slideIndex將保存超時參考。 showSlides和currentSlide都需要訪問此變量：

var timeout = null;

2. 將您的超時參考存儲在該變量中：

function showSlides() {    
    // rest of the code...

    timeout = setTimeout(showSlides, 3000);
}

3. 清除超時並在您的點擊處理程序中重置：

function currentSlide(no) {
    // rest of the code...

    clearTimeout(timeout);
    timeout = setTimeout(showSlides, 3000);
}

這樣，超時將一直運行，直到達到 3 秒或單擊一個按鈕，這也將重置它並觸發另一個循環。