setInterval中的setTimeout工作不正常

Question

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

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

第一次代码运行良好，但在循环再次启动后，它开始快速切换。有人能告诉我为什么吗？

Answer 1

1. 间隔开始
2. 1秒后，间隔解析为：

• 类切换
• 超时被触发

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

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

---

一个更好的方法是使用一个类，并使用jQuery().toggle每秒切换一次(使用一个间隔且没有超时(。

Answer 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();