jQuery：使事件只在滾動中發生一次

我試圖跟蹤人們如何在我的網站上使用jQuery進行滾動。目前，當用戶滾動頁面內容的25％，50％，75％和100％時，我的代碼會將消息記錄到控制檯。jQuery：使事件只在滾動中發生一次

正如你所看到的，我爲每個階段創建了四個單獨的函數，並且使用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(){ 
 
\t if($(window).scrollTop() > twentyFive){ 
 
\t \t console.log("25 % scrolled!"); 
 
\t \t $(window).off('scroll', twentyFiveFunction); 
 
\t \t $(window).on('scroll', fiftyFunction); 
 

 
\t \t } 
 
\t } 
 

 
function fiftyFunction(){ 
 
\t if($(window).scrollTop() > fifty){ 
 
\t \t console.log("50 % scrolled!"); 
 
\t \t $(window).off('scroll', fiftyFunction); 
 
\t \t $(window).on('scroll', seventyFiveFunction); 
 
\t \t } 
 
\t } 
 

 

 
function seventyFiveFunction(){ 
 
\t if($(window).scrollTop() > seventyFive){ 
 
\t \t console.log("75 % scrolled!"); 
 
\t \t $(window).off('scroll', seventyFiveFunction); 
 
\t \t $(window).on('scroll', scrollCompleteFunction); 
 
\t \t } 
 
\t } 
 

 
function scrollCompleteFunction(){ 
 
\t if($(window).scrollTop() > totalHeight){ 
 
\t \t console.log("100 % scrolled!"); 
 
\t \t $(window).off('scroll', scrollCompleteFunction); 
 
\t \t } 
 
} 
 

 

 
$(window).on('scroll', twentyFiveFunction); 
 

 

 
});

來源

2015-01-09 wikipoz

時使用jQuery one功能應該把它簡化一下。

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

你就不必每次都使用off。

來源

2015-01-09 23:19:48

感謝您迴應！我不確定你的意思。當然，我可以使用一個函數，調用函數$（window）.one（'scroll'，twentyFiveFunction）。但據我所知，仍然要求我在我的四個包含函數中使用on和off函數，因爲它們仍然會在滾動中多次運行並登錄到控制檯，不是嗎？ – wikipoz 2015-01-10 12:26:14

@wikipoz - 您不必在其他包含函數中使用off函數，因爲'one'只運行**一次**，然後自動關閉。 – 2015-01-10 15:41:04

像這樣的東西應該工作。

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'); 
    } 
});

來源

2015-01-09 23:21:43 lhoworko

感謝您提前回復。無論如何，我最後提出了一個很好的解決方案。因此，如果任何人的興趣，這就是我想出了：

var fired = [false, false, false, false]; 
 

 
\t $(window).on('scroll', function(){ 
 
\t var docHeight = Math.floor($(document).height()); 
 
\t var scrollTop = $(window).scrollTop() + $(window).height() + 500; 
 
\t for(i = 1; i < (fired.length + 1); i++){ 
 

 
\t if(((docHeight * 0.25 * i) < scrollTop) && fired[i-1] == false){ 
 
\t \t console.log(i/4*100 + "%!"); 
 
\t \t fired[i-1] = true; } 
 
\t \t } 
 
    });

來源

2015-01-10 14:46:49 wikipoz

jQuery：使事件只在滾動中發生一次

回答

相關問題