lazyload + ajax 沒有數據的時候的顯示，無效？

Question

var $isFetchingNotes = false;

  $(window).scroll(function(){
    if($('#loader-blog').hasClass('nomore')) {
      return false;
    }

    var $scroll = $(window).scrollTop();
    var $docHeight = $(document).height();
    var $winHeight = $(window).height();

    if($scroll === $docHeight - $winHeight){

      if(!$isFetchingNotes) {

        $isFetchingNotes = true;

        $('#loader-blog').html('<img src="/images/lazyload40.svg">');

        var lastDiv = $('.data-display-blog:last');
        var lastId  = $('.data-display-blog:last').attr('id');
        var type  = $('.data-display-blog:last').attr('data-type');
        var query  = $('.data-display-blog:last').attr('data-query');
        var dataTo = 'lastid='+lastId+'&type='+type+'&query='+query;

        $.ajax({
          type: 'POST',
          url:'app',
          data: dataTo,
          cache: false,
          success: function(data){
            if(data != ''){
              lastDiv.after(data);
            }else{
              $('#loader-blog').addClass('nomore').html('nodata');
            }
          },
          complete: function () {
            $isFetchingNotes = false;
          }
        });

      }
    }
  });

我發現 scroll 滑到底的時候，即使後端數據是 空
他也不會執行 $('#loader-blog').addClass('nomore').html('nodata'); 這段？
我在裡面有加了 ： alert事件，但是都遲遲沒有反應。
但我用谷歌 inspect 檢查 <div id="#loader-blog"></div> 每次滑下去都是有觸發東西的，會閃一下。（後來發現可能是觸發$('#loader-blog').html('<img src="../images/loading_v2.svg">'); ）
怎麼會這樣呢？我確定後端給的值是空值...

我即使變成這樣：

if(data != ''){
              lastDiv.after(data);
            }else if(data == ''){
              $('#loader-blog').addClass('nomore').html('no-data');
            }

卻還是沒有反應。。。

補充：

我要如何在還沒有滾到最下面碰底的時候，就開始發出ajax請求？

Answer 1

代码目测没有问题~，能否把后端返回的数据贴出来看看，或者添加如下代码在测试下：

// 控制台查看后端返回的数据
console.log(data);
if(data != ''){
    console.log("获取到新数据");
    lastDiv.after(data);
}else{
    console.log("没有更多数据了");
    $('#loader-blog').addClass('nomore').html('nodata');
}

看下控制台结果~，如果还不能定位到错误的话，建议把控制台信息贴出来

Answer 2

complete: 请求完成后回调函数 (请求成功或失败之后均调用), 你应该在success中 当 data==='' 时，设置 $isFetchingNotes = false; 。问题应该出在这里。

Answer 3

目前来看，代码里有两个疑似的问题：

1. HTTP动词选择的是POST，但在数据上却用了GET拼接的方式。保险起见建议还是写成对象而不是字符串拼接。另外这里也可以在网络面板里看下返回的状态码是正常的200还是别的
2. scroll是个高频事件，代码里可以看到是基于标志位做的防抖，但我觉得还是把复位放到success回调最后会更好吧，或者也可以用jQ的链式写法，用$.ajax().done().done()的形式，原success内容放在第一个done回调里，标志位复位放到第二个done回调里