条件语句中的Fullpage.js调用函数

Question

I have code here :

 $('#fullpage').fullpage({ afterLoad: function(anchorLink, index){ if(index == 1){ var $squares = $('.grid-container div'); function imgFade() { $squares.removeClass('active') //Choose 2 random divs var square1 = $squares.eq([Math.floor(Math.random()*$squares.length)]) var square2 = $squares.eq([Math.floor(Math.random()*$squares.length)]) //Assign active class $([square1, square2]).each( function(){ $(this).addClass('active'); }); setTimeout(imgFade, 2000); } imgFade(); } else { return false; } } }); //end fullpage 

 body {margin:0} section { height:100vh; width:100%; } .grid-container {width:100%;} .grid-container div { width:20vw; height:33.33vh; float:left; background: purple; opacity: 1; border:1px solid white; transition: opacity 3s ease; } div.active {opacity: 0.5;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.6/jquery.fullpage.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.6/jquery.fullpage.min.js"></script> <div id="fullpage"> <section id="section0" class="section"> <div class="grid-container"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </section> <section id="section1" class="section"> Some stuff </section> </div> 

I am trying to execute a function using Fullpage.js when the index (section) is equal to 1. I want the function to stop or pause when the user scrolls to the next section. When I inspect element, I can see the function is still running when I'm no longer on index 1 (the boxes are still changing color), even though I have the function wrapped in a conditional statement.

So I'd like to know how I can only run the function on the first section (index 1), and stop/pause on the other section.

Answer 1

That's because you are using a timeout. You'll have to clear it later on.

Follow this schema:

var timeoutId;

$('#fullpage').fullpage({
  afterLoad: function(anchorLink, index){   
      if(index === 1){
         timeoutId = setTimeout(imgFade, 2000); // <-- timeoutId assignation
      }
      else{
         clearTimeout(timeoutId);   // <-- this will remove the timeout
      }
   }
});

You can even clear it in the onLeave function. That will be more precise. If the nextIndex is different from 1, then clear it.

var timeoutId;

$('#fullpage').fullpage({
  afterLoad: function(anchorLink, index){   
      if(index === 1){
         timeoutId = setTimeout(imgFade, 2000); // <-- timeoutId assignation
      }
   },

   onLeave: function(index, nextIndex, direction){
      if(nextIndex !== 1){
         clearTimeout(timeoutId);   // <-- this will remove the timeout
      }
   }
});