jquery - スクリプトが再度リロードされないようにする

Question

無限ロードスクリプトのようなスクリプトを作成しました。上から下にスクロールすると、すべて正常に動作します。製品をクリックしてブラウザーの戻るボタンを押して、無限ローダーのあるページに戻ると、問題が発生します。すべての製品が再度読み込まれます。

いくつかの検索の後、これは関数が再びトリガーされるためである可能性があることがわかりました。document.ready問題は、他のすべてのスクリプトが機能しなくなったことです。私の次の提案は、商品が読み込まれる前に、商品が読み込まれる div を空にすることでした。問題は、次のページの最初または最後の製品のみがロードされることです。

誰かが解決策を知っていますか、それとも私にいくつかの方向性を教えてくれますか?

私の完全なローダースクリプト ->

<script type="text/javascript">

  var currentPage = {{ collection.page }};
  var collectionPages = {{ collection.pages }};
  var category = '{{ collection.internal.url }}';

  var appendProduct = function(product) {
    if(currentPage == 1){
      return false
    }
        //$(".collection-more").html("");
    $('<div class="product"></div>').html(product).appendTo($(".collection-more"));  
    var i = 1;
    $('.product').each(function() {
      if(i++ % 3 == 0)
        $(this).addClass('last');
    });
  };

  var loadProducts = function() {

    var url = "http://www.hioshop.nl/"+category+"/page"+currentPage+".ajax";

    $.getJSON(url,function(data) {

      $.each(data.products, function(index, product) {

        var imageUrl = product.image.replace('50x50x2', '180x150x2');

        var itemHtml = '' +
            '<a href="' + product.url + '" title="'+ product.fulltitle +'"><img src="'+imageUrl+'" width="180" height="150" alt="'+product.fulltitle+'" title="'+product.fulltitle+'" />';

        if(product.data_01 === 'sale'){
          itemHtml = itemHtml + '<div class="labels sale"></div>';
        }
        if(product.data_01 === 'nieuw'){
          itemHtml = itemHtml + '<div class="labels nieuw"></div>';
        }
        itemHtml = itemHtml +   
            '</a>' +
            '<div class="info">' +
            '<h3>' + '<a href="' + product.url + '" title="'+ product.fulltitle +'">' + product.fulltitle + '</a>' + '</h3>' +
            '<div class="price">' + product.price.price_money + '';

        if(product.price.price_old){
          itemHtml = itemHtml + ' <span>' + '<del>' + product.price.price_old_money + '</del>' + '</span>';
        }    

        itemHtml = itemHtml +
          '</div>' + // price
          '<div class="gridAddToCart">' +
          '<a class="button grey" href="'+product.url+'" title="'+product.fulltitle+'" rel="nofollow">'+'<span>Details</span></a>' +
          '<div style="margin-top:2px;"></div>' +
          '<a class="opener button blue" href="{{ 'cart/add/' | url }}'+product.vid+'" title="'+product.fulltitle+'" rel="nofollow"><span>In winkelwagen</span></a>'

          itemHtml = itemHtml +
          '</div>' + // gridAddToCart
          '</div>' + // info
          '<div class="clear"></div>' +
          '</div>';

        appendProduct(itemHtml)
          });

        $("#overlay").fadeOut();

        $(window).scroll(function() {
          update();
        });

      });
    };

    loadProducts();

    var isUpdating = false;

    var update = function() {  

      if($(window).height() + $(window).scrollTop() >= $(document).height() - 2000) {

        if(currentPage < collectionPages && !isUpdating) {

          isUpdating = true;

          currentPage++;
            $("#overlay").fadeIn();
          $(window).unbind('scroll');  


          setTimeout(function(){

            loadProducts();

            setTimeout(function(){

              isUpdating = false;

            }, 100);

          }, 100);
        }
      }
    };

    $(window).scroll(function() {
      update();
    });


</script>

UPDATED完全なコード