2

我正在创建一个“滚动到底部”新闻提要，当用户滚动到页面底部时它会填充新闻。

我有以下代码（通过检查用户是否滚动到底部）：

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       //Ajax Request
   }
});

在完成 ajax 请求以填充新闻之前，如何确保用户不会向上滚动然后再次向下滚动。换句话说，在 ajax 请求完成并填写其结果之前，有什么方法可以暂停它

4

5 回答 5

3

像这样的东西：

var request_pending = false;

function at_bottom_of_page() {
    return $(window).scrollTop() + $(window).height() > $(document).height() - 100;
}

$(window).scroll(function() {
    if (request_pending) {
        return;
    }               
    if (at_bottom_of_page()) {
        request_pending = true;
        doAjax(function (moar_news) {
            render_news(moar_news);
            request_pending = false;
        });
    }
});
于 2013-01-04T17:45:39.907 回答
0

只需使用一个变量来标记是否存在未完成的 ajax 请求。如果是这样，请不要再提出请求。否则获取数据。我的想法是，让用户滚动，为什么要阻止 UI。在这种情况下，就像进行同步调用一样。

var isLoading = false;
//event handler
$(window).scroll(function () {
   // check height..
   // make an ajax request if isLoading is false
   if (!isLoading) {
       $.ajax(/* .. */, success: function () {
           isLoading = false;
       }, 
       error: function () {
           isLoading = false;
       });
       isLoading = true;
   }
}

如果您仍然想在 ajax 响应之前停止侦听事件，只需删除绑定并将其重新附加到 ajax 响应处理程序中。

var isLoading = false;
addScrollEvent();

function scrollHandler(e) {
   // check height..
   // make an ajax request if isLoading is false
   if (!isLoading) {
       $.ajax(/* .. */, success: function () {
           isLoading = false;
           addScrollEvent();
       }, 
       error: function () {
           isLoading = false;
           addScrollEvent();
       });
       $(window).off('scroll', scrollHandler);
   }
}

function addScrollEvent() {
    $(window).on('scroll', scrollHandler);
}
于 2013-01-04T17:45:49.767 回答
0

您可以使用.off()删除事件处理程序。

var attachEvent = function(){

    $(window).scroll(function() {

        $(window).off("scroll");
        $.ajax("example.php").done(function() { 

            //If you want to reattach event
            attachEvent(); 
        });            
    });
};

attachEvent();
于 2013-01-04T17:51:45.100 回答
0

在发出 AJAX 请求之前，取消绑定scroll处理程序。处理完 AJAX 响应后，重新绑定scroll处理程序。您需要为scroll处理程序命名以启用解除绑定和重新绑定：

$(window).scroll(function scrollHandler() {
    if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
        $(window).off("scroll", scrollHandler);
        $.ajax({
            ...
            complete: function() {
                $(window).scroll(scrollHandler);
            }
        });
    }
});
于 2013-01-04T17:49:27.900 回答
0

不是这样的答案，而是不适合评论的注释。

对于 IE6/IE7/IE8，它的.scroll性能并不好，每次滚动都会调用你的回调数十次（如果不是数百次）。在我们的项目中，我们使用一个封装函数.detachedScroll来防止这种行为：

/**
* Detached scroll prevents freezing in IE<=8
*/
if($.browser.msie && parseInt($.browser.version, 10) <= 8) {
    $.fn.scrollDetached = function(callback) {
        return $(this).each(function() {
            var oThis = this;
            clearInterval(this.detachedScrollInterval);
            this.detachedScrollInterval = setInterval(function() {
                if (oThis.hasScrolled) {
                    oThis.hasScrolled = false;
                    // Calling detached scrolling callback
                    callback();
                }
            }, 500);
            $(this).scroll(function() {
                // There was a scrolling event
                oThis.hasScrolled = true;
            });
        });
    };
} else {
    $.fn.scrollDetached = $.fn.scroll;
}
于 2013-01-04T17:49:49.033 回答