切换按钮激活导致功能触发

Question

我正在尝试创建一个切换按钮，当它处于活动状态时会触发一个功能。

此函数附加了一个超时，并将在给定时间后重新触发。

这应该只在按钮处于活动状态时发生，因此如果用户再次单击所述按钮，自动化应该停止。换句话说，如果用户已将切换按钮设置为“非活动”，则该功能应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 类中一直处于活动状态是按钮的一部分。遇到问题是我可以说的最低限度，这真的并没有以几种不同的方式工作。

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

Answer 1

我认为这就是您要寻找的。我们正在根据“活动”类设置函数是否运行。

信息：由于您没有提供完整的代码，因此代码段在这里不起作用。

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>

Answer 2

将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>