Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/84.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript jQuery:使事件在滚动中只发生一次_Javascript_Jquery_Scroll - Fatal编程技术网

Javascript jQuery:使事件在滚动中只发生一次

Javascript jQuery:使事件在滚动中只发生一次,javascript,jquery,scroll,Javascript,Jquery,Scroll,我正在尝试使用jQuery跟踪人们在我的网站上滚动的方式。目前,每当有人滚动页面内容的25%、50%、75%和100%时,我的代码都会将消息记录到控制台 如您所见,我为每个阶段创建了四个单独的函数,并使用off()-函数防止事件再次触发。然而,对我来说,这样做似乎太过分了。有没有更好的方法来实现这一点而不必创建那么多函数 下面的代码工作得很好(据我所知)。我只是想知道有没有更好的解决办法 另外,我是一个完全的初学者,所以请在回答时考虑到这一点:) $(函数(){ var totalHeight

我正在尝试使用jQuery跟踪人们在我的网站上滚动的方式。目前,每当有人滚动页面内容的25%、50%、75%和100%时,我的代码都会将消息记录到控制台

如您所见,我为每个阶段创建了四个单独的函数,并使用off()-函数防止事件再次触发。然而,对我来说,这样做似乎太过分了。有没有更好的方法来实现这一点而不必创建那么多函数

下面的代码工作得很好(据我所知)。我只是想知道有没有更好的解决办法

另外,我是一个完全的初学者,所以请在回答时考虑到这一点:)

$(函数(){
var totalHeight=$('footer').offset().top-$(window.height();
变量二十五=数学圆(总高度/4);
var五十=数学圆(总高度/2);
var seventyFive=数学圆(总高度*0.75);
函数二十五函数(){
如果($(窗口).scrollTop()>twentyFive){
log(“25%滚动!”);
$(窗口).off('scroll',二十五功能);
$(窗口).on('scroll',fiftyFunction);
}
}
函数fiftyFunction(){
如果($(窗口).scrollTop()>50){
log(“50%滚动!”);
$(窗口).off('scroll',fiftyFunction);
$(窗口).on('scroll',seventyFiveFunction);
}
}
函数seventyFiveFunction(){
如果($(窗口).scrollTop()>seventyFive){
log(“75%滚动!”);
$(窗口).off('scroll',seventyFiveFunction);
$(窗口).on('scroll',scrollCompleteFunction);
}
}
函数scrollCompleteFunction(){
如果($(窗口).scrollTop()>totalHeight){
log(“100%滚动!”);
$(窗口).off('scroll',scrollCompleteFunction);
}
}
$(窗口).on('scroll',twentyFive函数);

});使用jQuery
one
函数应该会稍微简化它


您不必每次都使用
off

类似的功能应该可以工作

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');
    }
});
var max\u scroll=0;
var done=[假,假,假,假]
var height=$(文档).height()-$(窗口).height();
$(窗口).on('scroll',function(){
var perc=$(window.scrollTop()/高度;
如果(perc=0&&!完成[索引]){
完成[索引]=真;
console.log(((索引+1)*25)+'%scrolled');
}
});

感谢您早些时候的回复。不管怎样,最后我想出了一个好办法。如果有人感兴趣的话,下面是我的想法:

var fired=[false,false,false,false];
$(窗口).on('scroll',function(){
var.docHeight=数学地板($(document.height());
var scrollTop=$(窗口).scrollTop()+$(窗口).height()+500;
对于(i=1;i<(fired.length+1);i++){
如果(((多克重*0.25*i)});感谢您的回复!我不知道你是什么意思。当然,我可以使用one函数,调用函数$(window).one('scroll',twentyFiveFunction)。但就我所见,我仍然需要在我的四个包含函数中使用on和off函数,因为它们仍然会在scroll上多次运行并登录到控制台,否?@wikipoz-您不必在其他包含函数的函数中使用off函数,因为
one
只运行一次,然后自动“关闭”。