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

您需要在滚动函数范围之外定义一个变量，并将其用作标志来检查是否触发自定义逻辑，例如:

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 */
  }

})