jQuery：使事件僅在滾動上發生一次

Question

我正在嘗試跟蹤人們如何使用jQuery在我的網站上滾動。 目前，每當有人滾動瀏覽頁面內容的25％，50％，75％和100％時，我的代碼日志消息就會發送到控制台。

如您所見，我將為每個階段創建四個單獨的函數，並使用off（）函數防止事件再次觸發。 但是，對我來說，這種方式似乎太過分了。 有什么更好的方法可以執行此操作而無需創建盡可能多的功能？

下面的代碼工作正常（據我所知）。 我只是想知道我的工作是否有更好的解決方案？

PS。 我是一個完整的初學者，因此在回復時請考慮到這一點：）

 $(function(){ var totalHeight = $('footer').offset().top - $(window).height(); var twentyFive = Math.round(totalHeight/4); var fifty = Math.round(totalHeight/2); var seventyFive = Math.round(totalHeight*0.75); function twentyFiveFunction(){ if( $(window).scrollTop() > twentyFive ){ console.log("25 % scrolled!"); $(window).off('scroll', twentyFiveFunction); $(window).on('scroll', fiftyFunction); } } function fiftyFunction(){ if( $(window).scrollTop() > fifty ){ console.log("50 % scrolled!"); $(window).off('scroll', fiftyFunction); $(window).on('scroll', seventyFiveFunction); } } function seventyFiveFunction(){ if( $(window).scrollTop() > seventyFive ){ console.log("75 % scrolled!"); $(window).off('scroll', seventyFiveFunction); $(window).on('scroll', scrollCompleteFunction); } } function scrollCompleteFunction(){ if( $(window).scrollTop() > totalHeight ){ console.log("100 % scrolled!"); $(window).off('scroll', scrollCompleteFunction); } } $(window).on('scroll', twentyFiveFunction); }); 

Answer 1

使用jQuery one功能應該可以簡化它。

http://api.jquery.com/one/

你不會用off各一次。

Answer 2

這樣的事情應該起作用。

var max_scroll = 0;
var done = [false, false, false, false]
var height = $(document).height() - $(window).height();

$(window).on('scroll', function() {
    var perc = $(window).scrollTop() / height;
    if (perc <= max_scroll) return false;

    max_scroll = perc;
    var index = Math.floor(perc / 25) - 1;

    if (index >= 0 && !done[index]) {
        done[index] = true;
        console.log(((index + 1) * 25) + '% scrolled');
    }
});

Answer 3

感謝您較早的回復。 無論如何，我最終提出了一個好的解決方案。 所以，如果有人感興趣，這是我想出的：

 var fired = [false, false, false, false]; $(window).on('scroll', function(){ var docHeight = Math.floor($(document).height()); var scrollTop = $(window).scrollTop() + $(window).height() + 500; for(i = 1; i < (fired.length + 1); i++){ if( ( (docHeight * 0.25 * i) < scrollTop ) && fired[i-1] == false ){ console.log(i/4*100 + "%!"); fired[i-1] = true; } } });