javascript滑塊settimeout問題

我目前正在爲建築師開發一個小型網站。我的目標是實現儘可能簡單的一面。javascript滑塊settimeout問題

因此，我創建了網站作爲一個頁面的網站。您可以瀏覽不同的子頁面，無需重新加載，也無需使用php。只是HTML5和CSS3。

但客戶希望項目可以滑動。幸運的是，我發現了一個合適的滑塊上w3（https://www.w3schools.com/howto/howto_js_slideshow.asp）

是最簡單的，我可以找到prev和下一個按鈕，自動滑動和使用香草JS。您可以在使用滑塊時瀏覽項目。內容只是在前臺使用小空間，項目圖片替換了整個網站的背景。但它使用setTimeout，這讓我瘋狂。

只要用戶沒有按下下一個或上一個按鈕，一切都可以正常工作。幻燈片放映十分瘋狂。（當然，這個問題是相當普遍的，並有一些線程在這裏stackoverflow，但我找不到合適的答案爲我的項目！）

我嘗試了幾件事，但我不是很好JavaScript的。

<script> 
"use strict"; 
var slideIndex = 1; 
showDivs(slideIndex); 

function plusDivs(n) { 
showDivs(slideIndex += n); 
} 

function showDivs(n) { 
var i; 
var x = document.getElementsByClassName("mySlides"); 
    if (n==undefined){n = ++slideIndex;} 
if (n > x.length) {slideIndex = 1;} 
if (n < 1) {slideIndex = x.length;} 
for (i = 0; i < x.length; i++) { 
    x[i].style.display = "none"; 
} 
x[slideIndex-1].style.display = "block"; 
setTimeout(showDivs, 8000); // Change image every 8 seconds 
} 
</script>

這就是我目前使用的代碼。有沒有什麼辦法可以在每次幻燈片後重置計時器？我已閱讀關於clearTimeout，但無法讓它正常工作。

任何幫助表示讚賞。多謝你們。

來源

2017-08-23 Chrtz

'setTimeout'返回，你可以用它來'clearTimeout'時間ID結束的超時（和potentionally開始新的）。你需要在'showDivs'函數之外設置全局變量（例如'var timeoutId = null'），調用setTimeout作爲'timeoutId = setTimeout（showDivs，8000）;'並且執行if（timeoutId）{clearTimeout （timeoutId）}'在'plusDivs'回調中。但我也建議你考慮使用滑塊庫（例如Slick），你所有的設置看起來像：'$（'。mySlides'）.slick（）;' – Yoshi

感謝您的快速回答。這讓我更好地理解了這個問題。 – Chrtz

需要清除設置在showDivs

<script> 
"use strict"; 
var slideIndex = 1; 
var timeOutId; 
showDivs(slideIndex); 

function plusDivs(n) { 
    showDivs(slideIndex += n); 
} 

function showDivs(n) { 
    // Stop the timeout from triggering. 
    clearTimeout(timeOutId); 

    var i; 
    var x = document.getElementsByClassName("mySlides"); 
    if (n==undefined){n = ++slideIndex;} 
    if (n > x.length) {slideIndex = 1;} 
    if (n < 1) {slideIndex = x.length;} 
    for (i = 0; i < x.length; i++) { 
     x[i].style.display = "none"; 
    } 
    x[slideIndex-1].style.display = "block"; 
    // Schedule a new timeout. 
    timeOutId = setTimeout(showDivs, 8000); // Change image every 8 seconds 
}

來源

2017-08-23 12:22:38 Thijs

順便問一下，問題是setTimeout。它會在運行'showDivs'方法8秒後觸發。所以超時在腳本開始的'showDivs（slideIndex）'中被設置。 'plusDivs'也調用'showDivs'方法。如果您沒有清除超時，則每次調用'showDivs'時都會有額外的超時。這可能導致一些非常奇怪的視覺行爲，因爲超時會隨機發生。 – Thijs

啊，所以你需要改變你的代碼來將超時值存儲到變量中，這樣你就可以取消它。

var timer; 
function showDivs (n) { 
    /* the code */ 
    if (timer) clearTimeout(timer) 
    timer = setTimeout(showDivs, 8000); 
}

來源

2017-08-23 12:22:14 epascarello

這似乎也適用。只是不知道在哪裏調用clearTimeout函數 – Chrtz

javascript滑塊settimeout問題

回答

相關問題