>

코드 여기 :

$('#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에 더 이상 없을 때 함수가 여전히 실행 중임을 알 수 있습니다 (상자가 여전히 색상이 변함).

따라서 첫 번째 섹션 (인덱스 1)에서만 함수를 실행하고 다른 섹션에서는 중지/일시 정지하는 방법을 알고 싶습니다.

  • 답변 # 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
          }
       }
    });
    
    

관련 자료

  • 이전 mysql - SQL에서 값 전달
  • 다음 java - 429 aws-sdk를 사용하여 s3 객체에 대해 미리 서명 된 URL을 생성 할 때 요청이 너무 많습니다