Question

我制作的脚本包含我的团队网站的循环动画。但是Interval在调用函数2次后停止了！

查看代码：

＆＃13;

function loopSites() {
  if ($(".site").attr("style") == "display: none;") {
    if ($(" #0").hasClass("espro")) {
      $("#0").fadeOut(500);
      $("#0").removeClass("espro");
      $("#0").addClass("espra");
      setTimeout(function() {
        $("#0").html($("#espra"));
      }, 500);
      $("#0").fadeIn();
    } else if ($("#0").hasClass("espra")) {
      $("#0").fadeOut(500);
      $("#0").removeClass("espra");
      $("#0").addClass("espro");
      setTimeout(function() {
        $("#0").html($("#espro"));
      }, 500);
      $("#0").fadeIn();
    }
  }
}
$(document).ready(function() {
  var interval = setInterval(loopSites, 2000);
  $(window).resize(function() {
    if ($(window).width() < 768) {
      $(".site").hide();
      $("#0").addClass("espro");
      interval;
    } else if ($(window).width() >= 768) {
      $(".site").fadeIn();
      clearInterval(interval);
    }
  });
  if ($(window).width() < 768) {
    $(".site").hide();
    $("#0").addClass("espro");
    interval;
  } else {
    $(".site").fadeIn();
    clearInterval(interval);
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="section3">
  <div class="ui vertical masthead center aligned segment">
    <div class="ui text container">
      <h1 class="ui inverted header">
        <b>My beatiful text</b>
      </h1>
      <div class="ui stackable grid">
        <div class="row">
          <div class="eight wide column" id="0"></div>
          <div class="eight wide column site" id="1">
            <center id="espro">
              <a href="">
                <img src="http://res.cloudinary.com/espratings/image/upload/v1505946374/20638341_1631615206869494_6172662154381413393_n_qekvgh.png" alt="" class="ui circular image">
                <h3>fb page</h3>
                <p>fb page description</p>
              </a>
            </center>
          </div>
          <div class="eight wide column site" id="2">
            <center id="espra">
              <a href="">
                <img src="http://res.cloudinary.com/espratings/image/upload/v1505946374/20638341_1631615206869494_6172662154381413393_n_qekvgh.png" alt="" class="ui circular image">
                <h3>my beatiful site hehe</h3>
                <p>description of my site</p>
              </a>
            </center>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

＆＃13;

我做错了什么？以及如何缩短脚本？欢迎任何提示！

Answer 1

setInterval函数将运行，它将调用函数loopSites，它将显示两件事。然后你马上清除间隔。如果您希望继续运行，则无需清除间隔。

同时调用interval也不会做任何事情。 interval变量只是用于取消间隔的整数标识号。如果要重新创建间隔，则必须再次使用setInterval(loopSites, 2000);。

我建议查看一下：https://www.w3schools.com/jsref/met_win_settimeout.asp

此外，如果您尝试在屏幕上绘制内容，我建议您使用requestAnimationFrame：https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

setInterval在2次后清除？

1 个答案: