setInterval 中的 setTimeout 效果不佳

Question

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

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 秒后间隔解析：

classes切换
超时被触发

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

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

一个更好的方法完全是使用 one class 并使用 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();

setInterval 中的 setTimeout 效果不佳

setTimeout inside setInterval does not work well

javascript

jquery

settimeout