2 setTimeouts不能正确清除-如何重置正确的方式？

Question

会试图解释我在这里想做什么。我有两个徽标，我想在每个setTimeout函数"show"之后切换一个类，因为某种原因，重置timeOut没有正常工作。

第一个函数在5秒后被触发，第二个函数在8秒后被触发。我想重置这些，因为我不希望函数在正确的"X“秒数完成之前被触发。

let logo1 = document.querySelector('.logo-1');
let logo2 = document.querySelector('.logo-2');

function firstLogo() {
    console.log('First logo');
    logo1.classList.add('show');
    logo2.classList.remove('show');
    setTimeout(firstLogo, 5000);
}

function secondLogo() {
    console.log('Second logo');
    logo1.classList.remove('show');
    logo2.classList.add('show');
    setTimeout(secondLogo, 8000);
}

setTimeout(firstLogo, 8000);
setTimeout(secondLogo, 5000);

有人能帮忙吗？

Answer 1

你可以使用这样的东西：

var myVar;

function myFunction() {
  myVar = setTimeout(function(){ alert("Hello"); }, 3000);
}

function myStopFunction() {
  clearTimeout(myVar);
}

clearTimeout将阻止使用setTimeout()来执行的函数集。希望这能有所帮助。

Answer 2

你会得到一些奇怪的互动之间的超时，例如。

在开始时，计时器将设置为5秒和8秒seconds

• ：

1. logo1将显示
2. 徽标2将隐藏
3. 该函数将在另一个5
4. 中运行

​

seconds

1. 8秒：
   1. 徽标2将显示
   2. 徽标1将隐藏
   3. ，函数设置为在8
   4. 中再次运行

​

1. 在10秒时，第一个函数再次运行，使徽标1在15秒再次运行，第一个函数再次运行，徽标1在16秒内显示
2. ，第二个函数再次运行，徽标2在20秒显示
3. ，第一个函数再次运行，徽标1在24秒再次运行，第二个函数再次运行，徽标2显示H 236H 137，第一个函数再次运行，徽标1显示H 238H 13930秒，第一个函数再次运行，<>代码H240/代码>代码<>< 32秒，<>代码H><141>代码><32秒。第二个函数再次运行，徽标2显示为
4. 等…。

也许你想要logo 2显示5秒，然后徽标1显示3秒，然后徽标2显示5秒，等等。

在这种情况下，您可以使用setTimeout的适当设置，从另一个函数调用一个函数。由于默认情况是显示徽标，所以我已经更改了显示以隐藏。

​

let logo1 = document.querySelector('.logo-1');
let logo2 = document.querySelector('.logo-2');

function firstLogo() {
    console.log('Hiding first logo');
    logo1.classList.toggle('hide');
    logo2.classList.toggle('hide');
    setTimeout(secondLogo, 3000);
}

function secondLogo() {
    console.log('Hiding second logo');
    logo1.classList.toggle('hide');
    logo2.classList.toggle('hide');
    setTimeout(firstLogo, 5000);
}

firstLogo();

.hide {
  display: none;
}

<span class="logo-1">logo 1</span><span class="logo-2 hide">logo 2</span>

​