Question

我正在尝试编写用于在Scroll上获取产品的代码我喜欢的步骤如下 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

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

和所以...

Answer 1

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

e.g。你可以在每个滚动调用scrollled（）

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
}

如何清除旧的ajax请求

1 个答案: