scrollTop이 무엇인가와 같은 경우 함수를 시작하지만 한 번만 수행하십시오.

Question

dif<=400 함수가 시작될 때 함수를 계속 스크롤하지만 계속 스크롤을 계속하면 사이클이 시작됩니다. 함수가 한 번만 실행되기를 원하지만 스크롤 할 때마다 실행하지는 않습니다.

코드 :

$(window).scroll(function(){ 
 

 
var scrl_height=$(window).scrollTop(); 
 
var d_height=$(document).height(); 
 
var dif=d_height - scrl_height; 
 

 

 
if(dif <= 400){ 
 

 
    $('.myStat2').circliful(1500).stop(); 
 

 
    $('#n75').animateNumber({ number: 75 },1500); 
 
    $('#n100').animateNumber({ number: 100 },1500); 
 
    $('#n57').animateNumber({ number: 57 },1500); 
 
    $('#n87').animateNumber({ number: 87 },1500); 
 
    
 
    } 
 

 
})

.skll 
 
{ 
 
display: inline-block; 
 
height: 40px; 
 
width: 55px; 
 
margin-left: 10px; 
 
} 
 

 
#wd1{margin-left: -40px;} 
 

 
.myStat2 
 
{ 
 
margin-left: 50px; 
 
margin-top: -114px; 
 
}

<script type="text/javascript" src="js/jquery.circliful.min.js"></script> 
 
<script type="text/javascript" src="js/jquery.animatenumber.min.js"></script> 
 

 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor pellentesque odio in suscipit. Fusce posuere sapien neque, at tincidunt nisl ultrices id. Ut semper neque dui. Nunc volutpat diam vel risus tristique, at euismod ex dictum. Phasellus efficitur lectus nec felis venenatis dignissim. Vivamus sit amet ligula orci. Nulla tempus porttitor lectus, vel mattis ipsum vehicula rutrum. Nullam blandit venenatis nisl, in vulputate diam tincidunt vel. Sed aliquam tortor in dapibus aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean convallis enim vel mollis sollicitudin. Integer lectus metus, facilisis vitae tempor a, ornare sed felis. Donec fringilla nibh vel nulla tempus tempor faucibus id turpis. 
 

 
Fusce maximus lobortis urna in feugiat. Praesent dui enim, mattis ac felis ac, tristique laoreet mi. Nam ac nisi et lectus lobortis lobortis. Pellentesque vel metus cursus, scelerisque orci at, malesuada mauris. Proin scelerisque molestie lacinia. Nunc sodales commodo purus, non imperdiet magna volutpat quis. Morbi nec sodales felis. Curabitur luctus sapien ante, a ullamcorper neque volutpat non. Quisque vestibulum ornare tellus quis elementum. Nam risus sem, dignissim quis bibendum at, condimentum sit amet nibh. Vivamus sodales ultricies purus, ac luctus ex molestie non. Sed pretium condimentum felis vel ullamcorper. 
 

 
Proin fringilla elementum mollis. Morbi ornare mauris tortor, non fringilla augue gravida sit amet. Aliquam commodo consequat viverra. Pellentesque at accumsan metus. Ut consectetur ante sit amet pharetra consequat. Vivamus porta quam a magna imperdiet lobortis. Donec porta gravida erat nec accumsan. Duis euismod lorem dolor, quis mollis risus rutrum quis. Duis finibus convallis risus. Nullam placerat eu felis vitae euismod. Pellentesque quis sapien tellus. Nulla aliquam consequat pretium. Mauris viverra lacus ut urna pretium aliquet. Quisque non velit dolor. 
 

 
Cras id maximus sapien. Nulla egestas dignissim nulla vel cursus. Aliquam imperdiet odio dolor. Suspendisse dictum est sit amet sem gravida ultricies. Nunc in tortor nunc. Sed sodales vehicula commodo. Vivamus consequat mi mi, nec interdum ipsum cursus a. Fusce venenatis semper vulputate. Phasellus euismod fringilla efficitur. Cras feugiat nunc convallis lacus ultrices, ut accumsan purus porttitor. Nullam est purus, hendrerit nec tortor in, faucibus bibendum turpis. Cras id massa a tellus varius auctor. 
 

 
Pellentesque at posuere urna. Praesent nec urna sit amet elit pretium consectetur ac id lorem. Sed faucibus eros sed justo maximus lobortis. Integer eget mauris elit. Nullam volutpat libero sit amet elit feugiat, a suscipit enim auctor. Nulla aliquam orci sed ullamcorper condimentum. Curabitur tempor turpis ut urna posuere blandit. Morbi id libero vel enim facilisis gravida. Sed euismod venenatis lacus in ullamcorper. Nunc in finibus est, nec pulvinar purus. Morbi tristique dolor vitae ligula tincidunt, sit amet fringilla purus blandit. Proin accumsan neque ut lectus congue suscipit. Vivamus odio ipsum, porttitor ac ex id, consequat egestas augue. 
 

 
<ul class="sec"> 
 
    <li class="skll" id="wd1"> 
 
    <div class="numb" id="n75">0</div> 
 
    <div class="myStat2" data-dimension="150" data-width="10" data-percent="75" data-fgcolor="#A8D164" data-bgcolor="#343434"></div> 
 
    </li> 
 

 
    <li class="skll"> 
 
    <div class="numb" id="n100">0</div> 
 
    <div class="myStat2" data-dimension="150" data-width="10" data-percent="100" data-fgcolor="#FBCF61" data-bgcolor="#343434"></div> 
 
    </li> 
 

 
    <li class="skll"> 
 
    <div class="numb" id="n57">0</div> 
 
    <div class="myStat2" data-dimension="150" data-width="10" data-percent="57" data-fgcolor="#FF6F6F" data-bgcolor="#343434"></div> 
 
    </li> 
 

 
    <li class="skll"> 
 
    <div class="numb" id="n87">0</div> 
 
    <div class="myStat2" data-dimension="150" data-width="10" data-percent="87" data-fgcolor="#A8D164" data-bgcolor="#343434"></div> 
 
    </li> 
 
</ul>

당신은 스크롤 기능의 범위를 외부의 변수를 정의하고, 사용자 지정 논리를 발생 여부를 확인하는 플래그로 사용할 필요가

Answer 1

다른 옵션은 이벤트를 바인딩 해제하는 것입니다. 이것으로 보너스는, 모든 스크롤 이벤트에 대한 점검이 없다는 것입니다.

$(window).on("scroll.past400", function(){ 

    var scrl_height=$(window).scrollTop(); 
    var d_height=$(document).height(); 
    var dif=d_height - scrl_height; 


    if(dif <= 400){ 
     //... 
     $(window).off("scroll.past400"); 
    } 

}); 

Answer 2

, 예 :

var checkScroll=true; /* <-- set the flag to check here */ 

$(window).scroll(function(){ 

var scrl_height=$(window).scrollTop(), 
    d_height=$(document).height(), 
    dif=d_height - scrl_height; 


if(dif <= 400 && checkScroll){ /* <-- only run if the flag is true */ 
    $('.myStat2').circliful(1500).stop(); 
    $('#n75').animateNumber({ number: 75 },1500); 
    $('#n100').animateNumber({ number: 100 },1500); 
    $('#n57').animateNumber({ number: 57 },1500); 
    $('#n87').animateNumber({ number: 87 },1500); 
    checkScroll=false; /* <-- set the flag to false the first time, to prevent a second iteration */ 
    } 

})