執行一次

Question

我使用Waypoints.js當我向下滾動頁面啓動計數器功能的函數：

$(".counter").waypoint(function() { 
    $(".counter").count(); 
}, {offset:"100%"}); 

一切都很正常，但如果我向上滾動頁面，再次倒在櫃檯，它開始重新計數。我怎樣才能只執行一次計數器功能？

Answer 1

不知道是什麼代碼的意思做，但你總是可以用一個標誌變量來控制類似的東西：

var executed = false; 
$(".counter").waypoint(function() { 
    if (!executed) { 
     executed = true; 
     $(".counter").count(); 
    } 
}, {offset:"100%"}); 

Answer 2

您可以在事件觸發時第一次設置哨兵值，然後根據該值跳過邏輯。

這裏有一種方法，你可以這樣做：

var count = 0; 

$(".counter").waypoint(function() { 
    if (count > 0) return; 
    $(".counter").count(); 
    count++; 
}, {offset:"100%"}); 

Answer 3

我知道這已經有了一個可以接受的答案，但是當前版本的jQuery Waypoint 2.x已經內置了triggerOnce選項。如果應該執行，則不需要手動保留標誌。

$(".counter").waypoint(function() { 
    $(".counter").count(); 
}, {offset:"100%", triggerOnce:true}); 

這也是同樣的事情上的處理程序結束的航點調用destroy，使其不會再執行：

$(".counter").waypoint(function() { 
    $(".counter").count(); 
    $(this).waypoint('destroy'); 
}, {offset:"100%"}); 

Answer 4

這個功能確實好聽，沒有任何額外的變量或需要國家來照顧：

function debounce(func, wait, immediate) { 
    var timeout; 
    return function() { 
     var context = this, args = arguments; 
     var later = function() { 
      timeout = null; 
      if (!immediate) func.apply(context, args); 
     }; 
     var callNow = immediate && !timeout; 
     clearTimeout(timeout); 
     timeout = setTimeout(later, wait); 
     if (callNow) func.apply(context, args); 
    }; 
}; 

https://jsfiddle.net/uje57boz/1/