Question

当我滚动到一个元素时，我有一个计数到一个数字的脚本，但是我希望脚本只触发一次，我尝试将脚本触发后将变量execute设置为false。但它仍然一遍又一遍地重复，（我在评论代码中解释了更多情况）

＆＃13;

$(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
    
}

}

＆＃13;

.empty-space{
  height: 500px;
}

＆＃13;

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

＆＃13;

正如你所看到的，如果你到达计数器元素，它会一次又一次地计数，有没有办法解决这个问题并让它运行一次？任何帮助将不胜感激。

Answer 1

试试这个：

＆＃13;

$(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
        
    }

    }

＆＃13;

.empty-space{
  height: 500px;
}

＆＃13;

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

＆＃13;

Answer 2

我认为你的代码没有按照你的想法行事。

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

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

这将始终运行，因为execution是一个set变量。

您想在检查前删除变量。如果设置不带var声明的变量，则可以删除并检查它。

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

delete executed 
if (!executed) {} returns false

当您使用var声明变量时，无法删除它。

Answer 3

每次执行该功能时，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/

3 个答案: