setInterval 内的 setTimeout 不能正常工作答案

【问题标题】：setTimeout inside setInterval does not work wellsetInterval 内的 setTimeout 不能正常工作
【发布时间】：2021-04-21 16:24:31
【问题描述】：

我的代码应该每秒更改项目的类并永远重复。

function myFunction() {
 setInterval(function() {
    $("#item").addClass("class-one").removeClass("class-two");
    setTimeout(function(){
      $("#item").addClass("class-two").removeClass("class-one");
    }, 1000);
  },1000);
}

myFunction();

第一次代码运行良好，但循环再次开始后，它开始切换非常快。谁能告诉我为什么？

【问题讨论】：

你想做什么？可能有一种方法可以在不使用setInterval 和setTimeout 的情况下做你想做的事。
我想重复切换，我尝试使用 while (true) 但浏览器崩溃了

标签： javascript jquery settimeout

【解决方案1】：

间隔开始
1 秒后间隔解决：

类切换
超时被触发

1 秒后：
- 超时解决
  - 类切换
- 间隔解析
  - 类切换
  - 超时被触发

您可能希望超时时间为间隔时间的一半，而不是相同。

完全更好的方法是使用 one 类并使用 jQuery().toggle 每秒打开和关闭它（使用一个间隔且没有超时）。

【讨论】：

谢谢！将 settimeout 的延迟减半解决了这个问题。 .toggle() 对我不好，我需要两个类

【解决方案2】：

正确方法：

var i = 0;
function myFunction() {
  setInterval(function() {
    if(i % 2 == 0) {
      $("#item").addClass("class-one").removeClass("class-two");
    } else {
      $("#item").addClass("class-two").removeClass("class-one");
    }
    i++;
  },1000);
}

myFunction();

或使用您的解决方案：（增加 1 秒的 setInterval 时间）

function myFunction() {
 setInterval(function() {
    $("#item").addClass("class-one").removeClass("class-two");
    setTimeout(function(){
      $("#item").addClass("class-two").removeClass("class-one");
    }, 1000);
  },2000);
}

myFunction();

【讨论】：