SetInterval 时间不正确运行

Question

我继承了一个要查看的错误，该错误由 "flip" 的两个图像组成，并在发生这种情况时使用设置的时间间隔。

据我所知，初始更改应该在 4 秒后发生，然后每 12 秒更改一次图像（显然这在当时并不重要）。

目前，第一张图像在 4 秒时更改，第二张图像在 8 秒左右更改。

我也愿意接受可以对此代码进行的任何改进。

//SPINNING LOGO
        if ($("#flipLogo").length) {
            function spinLogo() {
                $('#flipLogo').addClass("active");
                $('#flipLogo2').addClass("active");
//                console.log("yup yup");
                setTimeout(function () {
                   $('#flipLogo').removeClass("active");
                   $('#flipLogo2').removeClass("active");
                }, 4000);
                clearInterval();
            }
            setInterval(function () {
                spinLogo();
                clearInterval();
            }, 12000);
        }

Answer 1

我相信您正在寻找 $.toggleClass 在活动状态之间切换。
此外，正如 Hacketo 所说，您调用 clearInterval 错误 - 如果您想 stop 间隔，则应使用 setInterval 的 return 值调用它（我不你认为你不想这样做吗？）试试这个：

//SPINNING LOGO
function spinLogo() {
    // Flip the active classes on or off
    $('#flipLogo').toggleClass("active");
    $('#flipLogo2').toggleClass("active");
}
if ($("#flipLogo").length) {
    // after 4 seconds
    setTimeout(function() {
        // flip the logo
        spinLogo();
        // Set a timer to flip it again every 12 seconds
        setInterval(spinLogo, 12000);
    }, 4000);
}

这是实际操作：

//SPINNING LOGO
function spinLogo() {
  // Flip the active classes on or off
  $('#flipLogo').toggleClass("active");
  $('#flipLogo2').toggleClass("active");
}
if ($("#flipLogo").length) {
  // after 4 seconds
  setTimeout(function() {
    // flip the logo
    spinLogo();
    // Set a timer to flip it again every 12 seconds
    setInterval(spinLogo, 12000);
  }, 4000);
}

.flippable {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  text-align: center;
  display: none;
  color: white;
}
.flippable.active {
  display: block;
}

#flipLogo {
  background: blue;
}
#flipLogo2 {
  background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="flipLogo" class="flippable active">Logo 1</div>
<div id="flipLogo2" class="flippable">Logo 2</div>

(ps 在 if 语句中定义函数是错误的形式，如 hoisting will move them them to a place you might not expect)

SetInterval 时间不正确运行

SetInterval times not running correctly

javascript

setinterval

SetInterval 时间不正确 运行

SetInterval times not running correctly

javascript

setinterval

SetInterval 时间不正确运行