setInterval efface après 2 fois?

Question

Je crée un script qui contient une animation en boucle pour mes sites d'équipe. Mais les Interval s'arrêtent après avoir appelé 2 fois la fonction!

Regardez le code:

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>

Ce que je fais mal? Et comment rendre le script plus court? Toutes les astuces sont les bienvenues!

Answer 1

La fonction setInterval s'exécutera et appellera la fonction loopSites et affichera les deux choses. Ensuite, vous effacez l'intervalle tout de suite. Vous ne devez pas effacer l'intervalle si vous voulez qu'il continue. En outre, l'appel interval ne fait rien. La variable d'intervalle est juste un nombre d'identification d'entier utilisé pour annuler l'intervalle. Si vous voulez recréer l'intervalle, vous devez utiliser setInterval(loopSites, 2000); à nouveau.

Je suggère de vérifier ceci: https://www.w3schools.com/jsref/met_win_settimeout.asp

Aussi, si vous essayez de dessiner des choses sur l'écran, je suggère d'utiliser requestAnimationFrame: https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame