不能执行一次函数

-2

我有一个脚本，当我滚动到一个元素，但我希望脚本只触发一次，我试图通过设置变量execute为虚假脚本后计算到一个数字被解雇。但它仍然计数了个遍，（我说明了情况多在注释掉的代码）不能执行一次函数

$(function() { 
 
    var oTop = $('.stats').offset().top - window.innerHeight; 
 
    $(window).scroll(function(){ 
 

 
     var pTop = $('body').scrollTop(); 
 
     if(pTop > oTop){ 
 
       start_count(); 
 
     } 
 
    }); 
 
}); 
 

 
function start_count(){ 
 

 
var executed = false; // <= variable to false. 
 

 
if (!executed){ // <= make sure it didn't executed before. 
 

 
    $('.stats h1').countTo({ 
 
     onComplete: function() { 
 
     var elementToPrepend = '<span style="margin-left:4px;">+</span>'; 
 
     $(elementToPrepend).hide().appendTo(this).fadeIn(); 
 

 
     } 
 
    }); 
 
    
 
    executed = true; // <= the count() function already executed 
 
    
 
} 
 

 
}

.empty-space{ 
 
    height: 500px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-countto/1.2.0/jquery.countTo.js"></script> 
 

 
<div class="empty-space"> 
 
scroll down... 
 
</div> 
 

 
<div class="stats"> 
 
<h1 data-from="200" data-to="2000" data-speed="1750" data-refresh-interval="50">200</h1> 
 
</div> 
 

 
<div class="empty-space"> 
 

 
</div>

正如你可以看到，如果你达到它保持连连计数的反向件，是有没有办法解决这个问题，并让它运行一次？任何帮助，将不胜感激。

来源

2017-08-07 ExillustX

'executed'范围限定为低。该方法结束后会被销毁。 – Taplar

aka每当你调用'start_count'你重新定义'执行' – epascarello

你应该在函数外部定义它，所以它不会每次都被重置。 – Cernodile

试试这个：

$(function() { 
 
     var oTop = $('.stats').offset().top - window.innerHeight; 
 
     $(window).scroll(function(){ 
 

 
      var pTop = $('body').scrollTop(); 
 
      if(pTop > oTop){ 
 
        start_count(); 
 
      } 
 
     }); 
 
    }); 
 
    var executed = false; // <= variable to false. 
 

 
    function start_count(){ 
 

 
    
 

 
    if (!executed){ // <= make sure it didn't executed before. 
 

 
     $('.stats h1').countTo({ 
 
      onComplete: function() { 
 
      var elementToPrepend = '<span style="margin-left:4px;">+</span>'; 
 
      $(elementToPrepend).hide().appendTo(this).fadeIn(); 
 

 
      } 
 
     }); 
 
     
 
     executed = true; // <= the count() function already executed 
 
     
 
    } 
 

 
    }

.empty-space{ 
 
    height: 500px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-countto/1.2.0/jquery.countTo.js"></script> 
 

 
<div class="empty-space"> 
 
scroll down... 
 
</div> 
 

 
<div class="stats"> 
 
<h1 data-from="200" data-to="2000" data-speed="1750" data-refresh-interval="50">200</h1> 
 
</div> 
 

 
<div class="empty-space"> 
 

 
</div>

来源

2017-08-07 18:46:37 dawit

我已经更新了我的答案。如果您有任何疑问，请告知我 – dawit

我不认为你的代码是做什么你的想法。

var executed = false; // <= variable to false. 

if (!executed){ // <= make sure it didn't executed before.

这将始终运行，因为执行是一个设置变量。

你想在检查前删除变量。如果你设置了没有var声明的变量，它可以被删除和检查。

executed = false 
if (!executed) {} returns true 

delete executed 
if (!executed) {} returns false

当你用var声明一个变量时，它不能被删除。

来源

2017-08-07 18:50:44 Ogre55

每次执行该功能，executed=false，因此，!executed==true。
您必须声明变量的函数外，像这样：

var executed = false; // <= variable to false. 

function start_count(){ 

if (!executed){ // <= make sure it didn't executed before. 

$('.stats h1').countTo({ 
    onComplete: function() { 
    var elementToPrepend = '<span style="margin-left:4px;">+</span>'; 
    $(elementToPrepend).hide().appendTo(this).fadeIn(); 

    } 
}); 

executed = true; // <= the count() function already executed 
// it will remain true until an external function changes it 

} 
}

和工作小提琴：https://jsfiddle.net/30w9kbfj/

来源

2017-09-02 22:08:07

不能执行一次函数

回答

相关问题