Question

if i scrolling the page,jQuery Infinite Scroll’s event will be fires twice of three times.how can i aviod this happen? when the next page is loading,the jQuery Infinite Scroll’s event can’t be fires thanks.

$(function(){
    var speed = 1000;
    var container = $('#sharelist');
    container.imagesLoaded(function(){
      container.masonry({
        itemSelector: '.share',
        singleMode: true,
        columnWidth: 242,
        isFitWidth: true,
        animate: true,
        animationOptions: {
            duration: speed,
            queue: false
        }
      });
    });
    container.infinitescroll({
      navSelector  : '.page',     
      nextSelector : 'a.next',
      itemSelector : 'div[class=share]',
      loading: {
          finishedMsg: '报告,后面没有了哦.',
          img: 'image/icon_waiting.gif',
          msgText:'加载中'
        }
      },
      function( newElements ) {
        var newElems = $(newElements).css({ opacity: 0 });
        newElems.imagesLoaded(function(){
          newElems.animate({ opacity: 1 });
          container.masonry( 'appended', newElems, true );
          $('.namecard').floatUserInfo();
        });
      }
    );
    $("img").lazyload({
        placeholder : "image/grey.gif",
        effect      : "fadeIn"
     });
  });

Answer 1

There’s a lot of existing literature on throttling resize events, and you have essentially the same concern here. Typical solutions involve scheduling an asynchronous handler, and then only allowing one to be pending at a time. The most robust(?) way being to cancel and replace the old handler.

For example:

http://benalman.com/code/projects/jquery-throttle-debounce/examples/throttle/