Question

我有一个非常简单的脚本，工作正常。但是，我想延迟3秒的新结果追加，以避免服务器过载。因此，当您到达页面末尾时，加载图像应显示3秒钟，仅显示后，应生成ajax请求。

我如何制作“延迟”？

这是脚本：

$(window).scroll(function(){
    if($(window).scrollTop() == $(document).height() - $(window).height()){
         var lastID = $('div.row-details').last().attr("id");

         $('div#loadmoreajaxloader').show();

         $.ajax({url: "/projects.php?lastID=" + lastID,
            success: function(html){
                if(html){
                       $("#maintable").append(html);
                       $('div#loadmoreajaxloader').hide();
                 }else{
                       $('div#loadmoreajaxloader').html('<center>No more posts to show.</center>');
                   }
              }
           });
      } 
});

Answer 1

将AJAX调用包含在传递给setTimeout()的匿名函数中，如下所示：

setTimeout(function() {
    $.ajax({
        url: "/projects.php?lastID=" + lastID,
        success: function(html) {
            if (html) {
                $("#maintable").append(html);
                $('div#loadmoreajaxloader').hide();
            } else {
                $('div#loadmoreajaxloader').html('<center>No more posts to show.</center>');
            }
        }
    });
}, 3000);

Answer 2

对于你的评论：“我已经尝试过，它只是第一次点击页面的末尾。然后，一切都变得一团糟:(”，

你可以试试clearTimeout（）;?如果您在3秒内再次遇到滚动条件，则不会进行ajax调用。可能解决了你的陷阱问题。

var timeoutId;
    $(window).scroll(function(){
        if($(window).scrollTop() == $(document).height() - $(window).height()){
             var lastID = $('div.row-details').last().attr("id");
             clearTimeout(timeoutId);   // no problem if invalid id, there is no exception     
             $('div#loadmoreajaxloader').show();
               timeoutId = setTimeout(function() {
                    $.ajax({
                        url: "/projects.php?lastID=" + lastID,
                        success: function(html) {
                            if (html) {
                                $("#maintable").append(html);
                                $('div#loadmoreajaxloader').hide();
                            } else {
                                $('div#loadmoreajaxloader').html('<center>No more posts to show.</center>');
                            }
                        }
                    });
                }, 3000);

          } 
    });

Answer 3

有些解决方案不需要您在第一次 AJAX调用之前等待3秒。查看Underscore's throttle()功能。

无限滚动 - 如何延迟ajax请求？

3 个答案: