Question

我继承了一个由两个图像组成的错误，这两个图像是＆＃34;翻转＆＃34;并在发生这种情况时使用设置间隔时间。

据我所知，最初的变化应该在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 - 如果你想停止间隔（我不认为你想要），应该使用setInterval的返回值调用它做这个？）试试这个：

//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);
}

这里有效：

＆＃13;

//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);
}

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

（ps在if语句中定义函数是不好的形式，如hoisting will move them them to a place you might not expect）

SetInterval次数未正确运行

1 个答案: