1

我正在尝试编写代码以在滚动步骤上获取产品，我遵循 1] 搜索产品 2] 在一个 div 上获取结果 3] 在结果 div 的滚动上想要下一个产品

但是每次搜索命中和滚动产品会发生什么一次调用许多ajax请求我只想要一次ajax应该调用（而不是旧的ajax请求）

我的 jQuery 代码是

 jQuery("#product_search_filter").submit(function () {
   jQuery(".load_more_result").remove();
    jQuery.ajax({
        url: ajaxurl,
        type: "post",
        data: jQuery(this).serialize(),
        dataType: "json",
        success: function (products) {
            var load_more = 0;
            jQuery(".right_bar_sub_inner").html("");
            jQuery.each(products, function (i, data) {
                if (this.image) {
                    jQuery(".right_bar_sub_inner").append('<div class="product_show" alt="' + i + '"> <img class="right_bar_img size-auto" src="' + this.image + '" title="'+ this.title +'"> </div>');
                }
            });
            jQuery(".right_bar_sub_inner").append("<div class='load_more_result'>Load More...</div>");
            var start = false;

            jQuery(".right_bar_sub").scroll( function(){
                var _data = jQuery("#product_search_filter").serialize();
                _data += "&offset=" + load_more;
                jQuery(".load_more_result").css('opacity','0.1');                                            
                jQuery.ajax({
                    url: ajaxurl,
                    type: "post",
                    data: _data,
                    dataType: "json",
                    success: function (products) {
                        jQuery.each(products, function (i, data) {
                            if (this.image) {
                                jQuery(".load_more_result").before('<div class="product_show" alt="' + i + '"> <img class="right_bar_img size-auto" src="' + this.image + '" title="'+ this.title +'"> </div>');
                            }
                        });
                        jQuery(".load_more_result").css('opacity','1');
                        start = false;
                    }
                });
                return false;
            });
        }
    });
    return false;
});

你可以在Lamp-database看到这个问题

尝试再次搜索然后在萤火虫的控制台上看到你可以看到第一次只有一个请求在滚动如果你再次搜索然后两个请求正在调用

等等...

4

1 回答 1

0

您可能想要的是不在每个滚动事件上发出 ajax 请求，而是在用户停止滚动一段时间后发出 ajax 请求。为此，您可以在每个滚动事件上重新启动一个计时器，该计时器在达到特定值（示例中为 250 毫秒）后将触发实际的 ajax 请求。

例如，您可以在每次滚动调用 scrolled()

var timeoutid;
jQuery(".right_bar_sub").scroll( function() {
  scrolled();
  //...
});

function scrolled() { //delay the request. 
  clearTimeout(timeoutid); //otherwise it will be called multiple times
  timeoutid=window.setTimeout("ajaxcall()", 250); //make ajax request in 250 ms
}

function ajaxcall() {
 //make your ajax request here
}
于 2013-09-30T12:29:31.960 回答