时间戳

首页 > 解决方案 > 由于错误的延迟 Javascript，图像滑块无法正常工作

javascript - 由于错误的延迟 Javascript，图像滑块无法正常工作

问题描述

下面是我的图像滑块代码：

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>

这些是我的按钮。

标签： javascripthtml

解决方案

即使您单击您拥有的按钮，从您的函数调用的超时showSlides将继续自行滴答。您必须在单击时手动重置它。为此，您需要执行以下操作：

  1. 声明一个像你slideIndex这样的变量，它将保存超时参考。这个变量需要同时被showSlides和访问currentSlide：
var timeout = null;
  1. 将您的超时参考存储在该变量中：
function showSlides() {    
    // rest of the code...

    timeout = setTimeout(showSlides, 3000);
}
  1. 清除超时并在您的点击处理程序中重置：
function currentSlide(no) {
    // rest of the code...

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

这样，超时将一直运行，直到达到 3 秒或单击一个按钮，这也将重置它并触发另一个循环。

推荐阅读