切换按钮活动使功能触发

Question

我试图创建一个切换按钮，当活动导致函数触发时。

这个函数有一个超时附加到它，并将在给定的时间后重新触发。

只有当按钮处于活动状态时才会发生这种情况，因此，如果用户再次单击said按钮，则自动化应该停止。换句话说，如果用户已使切换按钮“不活动”，则该函数应该是return。

以下是代码：

​

function autoSlides() {
  slideIndex++;
  showSlides(slideIndex);
  setTimeout(autoSlides, 10000);
}

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

function currentSlide(n) {
  n--;
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  for (i = 0; i < slides.length; i++) {
    if (slides[i].style.transform == "translateX(100%)") {
      slides[i].style.display = "none";
    } else if (slides[i].style.transform == "translateX(-100%)") {
      slides[i].style.display = "inline-block";
    }
    slides[i].style.transform = "translateX(-100%)";
  }

  if (slideIndex >= slides.length) {
    slideIndex = 0;
  } else if (slideIndex < 0) {
    slideIndex = slides.length;
  }

  slides[slidePrev].style.transform = "translateX(100%)";
  slides[slideIndex].style.transform = "translateX(0)";

  slidePrev = slideIndex;
}

.Slides {
  position: absolute;
  transform: translateX(-100%);
  transition: transform 2s;
  display: inline-block;
  width: 100%;
  height: 100%;
  margin: 0;
}

.Slides-Images {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#asktoggle-base {
  height: auto;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
}

#asktoggle {
  font-size: 0.5em;
  cursor: pointer;
  color: white;
  background-color: rgba(226, 208, 0, 0.6);
  border-radius: 3px;
  padding: 10px;
  display: inline-block;
  transition: background-color 0.5s linear;
}

.active,
#asktoggle:hover {
  background-color: rgb(226, 208, 0);
}

<span class="Slides" style="transform:translateX(0)">
  <img src="//placehold.it/1000?text=Gallery-1" class="Slides-Images">
</span>

<span class="Slides">
  <img src="//placehold.it/1000?text=Gallery-2" class="Slides-Images">
</span>

<span class="Slides">
  <img src="//placehold.it/1000?text=Gallery-3" class="Slides-Images">
</span>

<span class="Slides">
  <img src="//placehold.it/1000?text=Gallery-4" class="Slides-Images">
</span>

<div id="asktoggle-base">
  <span id="asktoggle">toggle slideshow</span>
</div>

​

我尝试创建另一个function和一个do{} while()循环，其中上述函数将向按钮中添加.active类，然后触发autoSlides()函数，只要.active类是按钮的一部分，autoSlides()函数就会处于活动状态。遇到问题是我能说的最起码的，这实际上没有在几种不同的方式起作用。

我看到了this的问题，答案是jQuery，我宁愿避免使用它，因为我的其他脚本都处于良好的ol‘JavaScript中。但如果需要的话，我想我可以用它做点什么。

Answer 1

将var sto = setTimeout();存储到变量中，然后存储clearTimeout(sto);

下面是一个例子；

var sto = 0;
var isEnabled = true;

function autoSlides()
{
    console.log("called");
}

function toggleMethod()
{
    if (isEnabled)
    {
        sto = setTimeout(autoSlides, 1000);
        console.log("enabled");
    } else {
        clearTimeout(sto);  
        console.log("disabled");        
    }

    isEnabled = !isEnabled; 
}

<button onclick="toggleMethod()">ToggleMe</button>

​

Answer 2

我想这就是你要找的。我们根据'active‘类将函数设置为运行或不运行。

信息:代码片段不会在这里工作，因为您没有提供完整的代码。

​

function autoSlides() {
    var slidesTimeout = setTimeout(function () {
        autoSlides();
    }, 10000);

    if (document.getElementById("asktoggle").classList.contains('active')) {
        slideIndex++;
        showSlides(slideIndex);
        slidesTimeout;
    } else {
        clearTimeout(slidesTimeout);
    }
}

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

function currentSlide(n) {
    n--;
    showSlides(slideIndex = n);
}

function showSlides(n) {
    var i;
    for (i = 0; i < slides.length; i++) {
        if (slides[i].style.transform == "translateX(100%)") {
            slides[i].style.display = "none";
        } else if (slides[i].style.transform == "translateX(-100%)") {
            slides[i].style.display = "inline-block";
        }
        slides[i].style.transform = "translateX(-100%)";
    }

    if (slideIndex >= slides.length) {
        slideIndex = 0;
    } else if (slideIndex < 0) {
        slideIndex = slides.length;
    }

    slides[slidePrev].style.transform = "translateX(100%)";
    slides[slideIndex].style.transform = "translateX(0)";

    slidePrev = slideIndex;
}

document.getElementById("asktoggle").addEventListener("click", toggleActive);
function toggleActive() {
    document.getElementById("asktoggle").classList.toggle("active");
    autoSlides();
} 

.Slides {
  position: absolute;
  transform: translateX(-100%);
  transition: transform 2s;
  display: inline-block;
  width: 100%;
  height: 100%;
  margin: 0;
}

.Slides-Images {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#asktoggle-base {
  height: auto;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
}

#asktoggle {
  font-size: 0.5em;
  cursor: pointer;
  color: white;
  background-color: rgba(226, 208, 0, 0.6);
  border-radius: 3px;
  padding: 10px;
  display: inline-block;
  transition: background-color 0.5s linear;
}

.active,
#asktoggle:hover {
  background-color: rgb(226, 208, 0);
}

<span class="Slides" style="transform:translateX(0)">
  <img src="//placehold.it/1000?text=Gallery-1" class="Slides-Images">
</span>

<span class="Slides">
  <img src="//placehold.it/1000?text=Gallery-2" class="Slides-Images">
</span>

<span class="Slides">
  <img src="//placehold.it/1000?text=Gallery-3" class="Slides-Images">
</span>

<span class="Slides">
  <img src="//placehold.it/1000?text=Gallery-4" class="Slides-Images">
</span>

<div id="asktoggle-base">
  <span id="asktoggle">toggle slideshow</span>
</div>

​