1

我正在编写一个无限滚动功能，如果它$(window).scrollTop()几乎与文档高度一样大，它就会运行，并且它工作得很好......

问题是加载新帖子需要几秒钟的时间，并且在那段时间，如果页面被滚动，该函数会在文档变大之前被多次调用，因此没有按照我的意图加载帖子。

我可以在函数中添加一行来暂停特定事件（在本例中为scroll事件），直到函数完成执行？

function f(){
    //stop $(window).scroll
    //execute code
    //allow $(window).scroll
}
$(window).scroll(function(){
    if(condition){
        f();
    }
});
4

3 回答 3

1

约翰·雷西格（ John Resig）不久前对此发表了一篇文章

这是他使用的代码

didScroll = false;

$(window).scroll(function() {
     didScroll = true;
 });

setInterval(function() {
    if ( didScroll ) {
      didScroll = false;
      // Check your page position and then
      // Load in more results
   }
}, 250);
于 2013-07-24T23:28:21.230 回答
0

您可以使用$.off取消绑定事件，但我建议仅使用变量来跟踪它是否被触发。

此代码段将阻止 f 被调用，直到scrolling再次设置为 false。

$(window).scroll(function(){
    if(this.scrolling == undefined)
        this.scrolling = false;

    if(this.scrolling == false){
        this.scrolling = true;
        f();
    }
});

function f(){
    //execute code
    window.scrolling = false;
}
于 2013-07-24T22:45:48.583 回答
0

您可以在调用滚动事件后删除它，然后在加载帖子请求完成时重新附加它：

function loadPosts() {
    if (condition) { // e.g. scrollTop almost equal to document height.
        $(window).off('scroll', loadPosts);
        $('[selector]').load('[URL-to-posts]', function(posts) {
            bindScroll();
            // Display posts.
        });
    }
}

// Binds the scroll event.
function bindScroll() {
    $(window).on('scroll', loadPosts);
}

$(bindScroll); // Call on document ready.
于 2013-07-24T23:02:38.870 回答