Question

我有代码here：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

当索引（部分）等于1时，我尝试使用Fullpage.js执行一个函数。我希望当用户滚动到下一部分时该函数停止或暂停。当我检查元素时，我可以看到当我不再在索引1上时，该函数仍在运行（框仍在改变颜色），即使我将函数包装在条件语句中。

所以我想知道如何只在第一部分（索引1）上运行该功能，并在另一部分停止/暂停。

Answer 1

那是因为您正在使用超时。你以后必须清除它。

遵循此架构：

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

您甚至可以在onLeave功能中清除它。这将更加精确。如果nextIndex与1不同，则清除它。

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

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

1 个答案: