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

Question

我有代码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>

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

所以我想知道如何只能运行第一部分（索引 1）上的函数，以及另一部分上的 stop/pause 函数。

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 在条件语句中调用函数

Fullpage.js call function in a conditional statement

javascript

function

if-statement

fullpage.js