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