下拉加載更多+防止多次觸發

需要在聊天互動展示列表展示，滑動到最下面，重新請求加載數據

 

 

利用 滾動的位置+滾動的距離 - （自定義的偏移量）》=元素盒子的高度 來計算是否元素內部滾動到了底部：nScrollTop + nDivHight> nScrollHight
因為1px 也是超出，有可能造成多次請求，所以要進行一下定時器延遲執行

$('.scroll_box').scroll(function () {
        var type=$(this).attr('data-type');
        var  obj=$('.chat');
        switch (type) {
            case 'chat':
               
                break;
            case 'question':
                obj=$('.que_r')
                break;
            case 'online':
                obj=$('.online_lists')
                break;
            default:
                break
        }
        var nDivHight = obj.height();//元素的固定高度
        var nScrollHight = $(this)[0].scrollHeight;//滾動距離總長
        var nScrollTop = $(this)[0].scrollTop;//滾動到的當前位置
//40是偏差大小
        if(nScrollTop + nDivHight-40> nScrollHight){
            getLoadMore()
        }
    });

    var loadMore=(type)=>{
       //ajax掉數據
        console.log('獲取數據')
    }
//防止多次觸發
    var debounce=(func,wait=1000)=>{
        var timeout;
//利用定時器 執行回調函數 
        return function(event){
            clearTimeout(timeout);
            timeout=setTimeout(()=>{
                func(event)
            },wait)
        }
    }
    var getLoadMore=debounce(loadMore)

　　

  用intersectionObserver瀏覽器原生提API實現下拉加載更多的地址：https://www.cnblogs.com/GoTing/p/13903449.html