setIntervalは2回後にクリアされますか？

Question

私のチームサイト用のループアニメーションを含むスクリプトを作成しています。しかし、Intervalは、関数を呼び出す2回後に停止しています！私が間違って作ってるんだ何

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

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

：

は、コードを見て？スクリプトを短くする方法は？ヒントは大歓迎！

Answer 1

setInterval関数が実行され、関数loopSitesが呼び出され、2つのものが表示されます。次に、すぐに間隔をクリアします。インターバルを継続したい場合は、間隔をクリアしないでください。

intervalも何もしません。 interval変数は、間隔をキャンセルするために使用される単なる整数識別番号です。間隔を再作成する場合は、setInterval(loopSites, 2000);を再度使用する必要があります。

私は、このチェックアウトすることをお勧め：あなたが画面上で物事を描くしようとしている場合、私はrequestAnimationFrameのを使用することをお勧めまたhttps://www.w3schools.com/jsref/met_win_settimeout.asp

：https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame