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

回答

相关问题