通過滾動(dòng)條無限加載文章，怎樣解決重復(fù)獲取

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

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

圖片描述

回答

編輯回答

淺時(shí)光

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

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

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

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

2018年4月23日 18:51

編輯回答

不舍棄

定義一個(gè)變量用來控制請(qǐng)求
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

編輯回答

夏木

定義一個(gè)變量用來控制請(qǐng)求，比如var hasRequest=true,請(qǐng)求之前判斷這個(gè)變量為true可以發(fā)起請(qǐng)求，發(fā)起請(qǐng)求后就將該變量設(shè)置為false，等請(qǐng)求完成后再把變量設(shè)置為true。

2018年5月7日 16:42

編輯回答