滚动到页面底部运行功能-该功能运行了太多次. [英] scrolling to bottom of page run function - function runs too many times.

问题描述

我正在尝试构建一个函数，当您滚动到页面底部时，它将运行一个函数以在页面上加载更多项目.

我首先加入了一个没有内容的div

<div id="loadMore"></div>

然后我在这里找到了另一个查看滚动条的功能

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    console.log(docViewTop, docViewBottom, elemTop, elemBottom);
    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom) && (elemBottom <= docViewBottom) && (elemTop >= docViewTop));

}

$(window).scroll(function() {   

    if(isScrolledIntoView($('#loadMore')))
    {
        alert("reached");
        return false;

    }    
});

一个问题是它似乎警报到得太早，另一个主要问题是它多次"警报到达"屏幕了-这显然很糟糕，因为我只希望函数运行一次...

然后它将加载到其他内容中，如果再次到达页面底部，则该函数(例如，alert)将再次运行

我是最好的方法吗?有人可以帮忙吗?

谢谢

解决方案

使用滚动功能时，您需要小心，因为滚动每个像素会触发一次该事件.因此，您需要使用超时仅在滚动停止后才调用该函数.试试这个:

var timer;
$(window).scroll(function () {
    clearTimeout(timer);
    timer = setTimeout(function() {
        if (isScrolledIntoView($('#loadMore'))) {
            alert("reached");
            return false;
        }
    }, 50);
});

小提琴示例

i am trying to build a function that when you scroll to the bottom of the page it runs a function to load in more items on a page.

I started by putting in a div with no content

<div id="loadMore"></div>

and then i found on here another function that looks at the scroll

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    console.log(docViewTop, docViewBottom, elemTop, elemBottom);
    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom) && (elemBottom <= docViewBottom) && (elemTop >= docViewTop));

}

$(window).scroll(function() {   

    if(isScrolledIntoView($('#loadMore')))
    {
        alert("reached");
        return false;

    }    
});

one problem is it seems to alert reached too soon and the other main problem is that it alerts "reached" back to the screen so many times - this is obviously bad because I would only want the function to run once...

then it would load in the other content and if the bottom of the page was reached again then the function (alert in eg) would run again

am i going about this the best way? and can anyone help?

thanks

解决方案

When working with the scroll function you need to be careful as the event is triggered once for every pixel scrolled. Therefore you need to use a timeout to only call the function when scrolling has stopped. Try this:

var timer;
$(window).scroll(function () {
    clearTimeout(timer);
    timer = setTimeout(function() {
        if (isScrolledIntoView($('#loadMore'))) {
            alert("reached");
            return false;
        }
    }, 50);
});

Example fiddle

这篇关于滚动到页面底部运行功能-该功能运行了太多次.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！