不能執行一次函數

-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

不能執行一次函數

回答

相關問題