Javascript无限滚动调节/反跳 [英] Javascript infinite scroll throttling/debouncing

问题描述

我在几个页面上都设置了此无限滚动功能.它工作得非常好，但是Ajax调用加载更多项目会进行多个数据库调用，并且每次都必须加载很多图像，并且通常需要花费几秒钟的时间来加载.我将其定时时间设置为3到7秒，具体取决于我的连接.因此，当浏览器决定多次触发滚动事件时，它可能会变成真正的火车残骸.我该如何进行节流或取消跳动，以使浏览器在几秒钟的时间内不会多次运行Ajax调用，并使所有内容停止运行?

I have this infinite scroll function set up on several of my pages. It works perfectly fine, but the Ajax call to load more items makes several database calls and it has to load a lot of images each time, and it usually takes several seconds to load. I've timed it at between 3 and 7 seconds depending on my connection. Because of this, it can turn into a real train wreck when the browser decides to fire the scroll event several times. How could I go about throttling or debouncing it so that the browser doesn't run the Ajax call several times in the span of a few seconds and grind everything to a halt?

$(document).ready() 
{
    //Infinite scroll
   $(window).on('scroll', _.debounce( function(){
      var height = $(window).height();
      var scrollTop = $(window).scrollTop();
      var dHeight = getDocHeight();

      if( height + scrollTop >= dHeight - 100) 
      {
        //Display items that were previously hidden 
         showAllItems();
         if(!vloaded < START_NUM && !done){
             //Load next set of items
             $.ajax
             ({
              type: "POST",
              url: "/organizer/getMore",
              data: { filter: vfilter, loaded: vloaded },
              dataType: "html",
              success: function( responseText, textStatus, XHR )
              {
                if(responseText.indexOf("// GRID ENTRY //") < 0){   //Out of items to load
                    done = true;
                }
                else{
                    //Display items that were previously hidden 
                    showAllItems();
                    // select the element with the ID grid and insert the HTML
                    $( "#grid" ).append( responseText );
                    //alert("Loaded "+vloaded+" items");
                }
              }
            });
          // global variable
          vloaded +=LOAD_NUM;
      } // if
      }
    }
  }, 500, true)); // on
} // ready

我下载了下划线并添加了反跳功能，但是现在Ajax调用似乎根本没有运行.即使我没有立即将其设置为true，它也应该在我停止滚动后很快执行，但是根本不执行.

I downloaded underscore and added the debounce function, but now the Ajax call doesn't seem to be running at all. Even if I hadn't set immediate to true it should execute pretty quickly after I stop scrolling, but it doesn't execute at all.

推荐答案

下划线库具有用于以下目的的方法:

The Underscore library has methods for this:

• _.throttle()
• _.debounce()

您可能想要_.debounce.如果不想将Underscore添加为其他依赖项，则可以从源中为所需的方法制作独立的方法.

You probably want _.debounce. If you don't want to add Underscore as an additional dependency, you may be able to make a standalone method from the source for the method you want.

这篇关于Javascript无限滚动调节/反跳的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！