Question

我有这个脚本，当用户到达页面末尾时发出ajax请求。它基于滚动事件。在页面加载时，我只在用户屏幕上显示16个产品，当他向下滚动时，我希望加载另外16个产品。我的脚本正在运行，但它执行多个ajax请求，这不是我想要的。这个想法只是展示另一套16种产品。脚本是：

$(window).scroll(function() {
    if ($(window).scrollTop() + $(window).height() > $('.made').offset().top) {
        //here I count how many products I have shown already   
        var productsshown = $(".productcell").length;
        $('.made').hide();
        $.ajax({
            type: "post",
            url: "./ajax/get_more_products.php",
            data: {
                "product": productsshown
            },
            dataType: 'json',
            cache: false,
            success: function(data) {
                $("#bcontent").html(data);
                $('.made').show();
            }
        });
    }
});

正如你所看到的，我有一个div，我正在使用它作为控制器，当用户看到这个div时 - 正在执行ajax。 ajax的结果正在被id="content"

带入另一个div

如何避免滚动事件多次执行ajax调用？我尝试隐藏我的控制器div .made并在ajax响应时我再次显示它以便当用户再次使用它时可以执行另外16个产品..但是ajax总是被调用多次执行，因为我想要它。

Answer 1

嗯，这是您的代码的一小部分内容，每当您加载更多项目时添加一个标记：

var _itemsLoading = false;
if ((!_itemsLoading) && ($(window).scrollTop() + $(window).height() > $('.made').offset().top)) {
    //here I count how many products I have shown already   
    var productsshown = $(".productcell").length;
    $('.made').hide();
    _itemsLoading = true;
    $.ajax({
        type: "post",
        url: "./ajax/get_more_products.php",
        data: {
            "product": productsshown
        },
        dataType: 'json',
        cache: false,
        success: function(data) {
            $("#bcontent").html(data);
            $('.made').show();
            _itemsLoading = false;
        }
    });
}

Answer 2

简单存储时间戳然后你发出ajax请求并重置它然后它返回或2秒后......然后设置时间戳不会激活你的请求。

Answer 3

我不处理滚动事件。我使用setInterval（）并测试自上次tic后位置是否发生了变化。

Answer 4

我刚刚更换了

if ($(window).scrollTop() + $(window).height() > $('.made').offset().top) {

使用：

if($(window).scrollTop() + $(window).height() == $(document).height()){

并将页面底部用作ajax控制器..现在可以使用了，谢谢！

在用户屏幕上显示html元素时执行ajax

4 个答案: