通過滾動條無限加載文章，怎樣解決重復獲取

滾動時重復加載文章
1.通過判斷滾動條的位置來加載文章，我判斷的是滾動條滾動到底部距離80px的位置時載入下一頁文章，但是這樣會一次加載很多次，要做怎么解決？

$(window).scroll(function(){
    var $d_height = $(document).height();
    var $w_scrollTop = $(this).scrollTop();
    var $w_height = $(this).height();
    if( $d_height - $w_scrollTop - $w_height < 80 ){
      $this = $('#pagination a'); 
      $this.addClass('loading'); //給a標簽加載一個loading的class屬性，可以用來添加一些加載效果   
      var href = $this.attr("href"); //獲取下一頁的鏈接地址   
      if (href != undefined) { //如果地址存在   
          $.ajax( { //發(fā)起ajax請求   
              url: href, //請求的地址就是下一頁的鏈接   
              type: "post", //請求類型是get   
    
          error: function(request) {   
              //如果發(fā)生錯誤怎么處理
              alert("aa"); 
          },   
          success: function(data) { //請求成功
              console.log("請求成功");
              $this.removeClass('loading'); //移除loading屬性
              var $res = $(data).find(".article"); //從數(shù)據(jù)中挑出文章數(shù)據(jù)，請根據(jù)實際情況更改 
              $('#content').append($res); //將數(shù)據(jù)加載加進posts-loop的標簽中。
              bgFullColor();
              var newhref = $(data).find("#pagination a").attr("href"); //找出新的下一頁鏈接   
              if( newhref != undefined ){   
                  $("#pagination a").attr("href",newhref);   
              }else{
                  $("#pagination a").remove(); //如果沒有下一頁了，隱藏
              }  
          }   
          });   
      }
      return false; 
    }
  });

圖片描述

回答

編輯回答

淺時光

剛好前幾天用原生 Js+ajax+會話緩存做了一次無限加載，感覺還是蠻麻煩的:

解決這塊的思路就是設置一個變量flag = 1，在每次發(fā)請求時使它等于0：

if (screenHeight + scrollTop >= document.body.scrollHeight - 200) {
    _this.setAjax(_this.flag);
    _this.flag = 0;
}

在發(fā)送請求前判斷這個flag，如果不符合預期直接return；
在請求成功后使這個flag加一就行了。
你也可以直接設置為true或者false更簡單一些，注意發(fā)送ajax一定要設置為同步，不要異步

2018年4月23日 18:51

編輯回答

不舍棄

定義一個變量用來控制請求
JavaScript：

var isGetData = false;
function searchByOrderType() {
    if(existShop) {
        document.getElementById("head").remove();
    }

    switch(orderType) {
        case 1:
            initAccessory(itemUrl + "&page=" + accessoryPage + "&sort=praiseRate," + s + "&name=" + name);
            break;
        case 2:
            initAccessory(itemUrl + "&page=" + accessoryPage + "&sort=sold," + s + "&name=" + name);
            break;
        case 3:
            initAccessory(itemUrl + "&page=" + accessoryPage + "&sort=minPrice," + s + "&name=" + name);
            break;
        case 0:
            initAccessory(itemUrl + "&page=" + accessoryPage + "&name=" + name);
            break;
        default:
            break;
    }
}
// 下拉加載更多
$(window).scroll(function() {　　
    if($(document).height() - $(this).scrollTop() - $(this).height() < 1 && isGetData) {
        isGetData = false;
        var th_url = window.location.href;
        accessoryPage = accessoryPage + 1;
        searchByOrderType();
    }
});
function initAccessory(url) {
    $.ajax({
        type: "GET",
        url: url,
        dataType: "json",
        success: function(result) {
            var h = window.screen.availWidth * 0.49 * 1.1 + "px";
            var height = "height";
           
            accessorys = accessorys.concat(result.content);
            for(var i=0;i<accessorys.length;i++){
                accessorys[i][height] = h;
            }
            accessoryVues.accessoryList = accessorys;
            $('#onloadddd').css('display', 'none');
            isGetData = true;

        },
        error: function(result) {
            console.log(result);
        }
    });
    if(accessoryVues == null) {
        accessoryVues = new Vue({
            el: "#center",
            data: {
                accessoryList: accessorys
            }
        });
    }
}

2018年4月13日 01:42

編輯回答