Fullpage.js call function in a conditional statement

I have a fiddle here.

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.

$('#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

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.