2 setTimeouts 未正确清除 - 如何以正确的方式重置？

Question

将尝试解释我在这里要做的事情。我有 2 个标志，我想在每个 setTimeout 函数后切换 1 个类"show"出于某种原因，重置超时无法正常工作。第一个函数在 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

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

1. 开始时，计时器将设置为 5 秒和 8 秒

2. 5 秒时：

1. 将显示 logo1

2. 徽标 2 将被隐藏

3. 该函数将在另外 5 秒内运行

3. 8 秒时：

1. 将显示徽标 2

2. 标志 1 将被隐藏

3. 该功能设置为在 8 秒后再次运行

4. 10 秒后，第一个函数再次运行，因此显示徽标 1

5. 15 秒后，第一个函数再次运行，标志 1 已显示

6. 16 秒时，第二个函数再次运行，显示徽标 2

7. 20 秒后，第一个函数再次运行，显示徽标 1

8. 在 24 秒时，第二个函数再次运行，显示徽标 2

9. 25 秒后，第一个函数再次运行，显示徽标 1

10. 30 秒后，第一个函数再次运行，已显示徽标 1

11. 32 秒时，第二个函数再次运行，显示徽标 2

12. 等等…

也许您希望徽标 2 显示 5 秒，然后徽标 1 显示 3 秒，然后徽标 2 显示 5 秒，依此类推。

在这种情况下，您可以使用setTimeout 的适当设置从另一个函数调用一个函数。由于默认是显示徽标，我已将show更改为hide，例如

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>