滑动 滚动条 发送 AJAX 请求

---

查阅相关项目源码，戳这里

PS：如果你进去了居然发现没有相关的代码块, 不要惊慌, 可能我还没有上传到 GITHU 上, 多多包涵 QAQ ~

在使用滚动条发送相关请求的时候遇到了一个很严重的问题, 在滚动条滚动时会一次性请求多个数据, 逻辑中应该是初始化页, 滚动到指定位置后请求第二页, 但偏偏直接一次性的请求了 2、3、4、5、... 页的内容。

声明 ① 下, 代码只是完成某个功能点, 可能你有更优的方案, 尽管评论。

代码

var dataids = [];  // 去重用的列表数据, 如果数据ID在列表中就不再渲染
var ajax_sign = true;  // AJAX 请求停止按钮, 此时你需要后端传递一个是否时尾页的字段
var page = 1;  // 初始页码
var request_sign = true;  // 请求锁, 请求时将参数置为 false, 结束后置为 true
var scrollHeight_sign = 0;  // 当前滚动条的高度, 判断依据

function ajax(params) {
    okUtils.ajax('URL', 'get', params).done(function (response) {
        if (response.next === null || response.next === '') {
            // 尾页判断
            ajax_sign = false;
        }
        if (response.data.length === 0) {
            // 空数据的提示
            document.getElementsByClassName('layui-none')[0].setAttribute('style', 'display: block;');
            return;
        } else {
            document.getElementsByClassName('layui-none')[0].removeAttribute('style');
        }
        // 渲染函数
        inner(response);
    }).fail(function (error) {
        console.log(error);
        ajax_sign = false;
    });
}

document.onscroll = function () {
    if (request_sign === true && ajax_sign === true) {
        request_sign = false;
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
            clientHeight = document.documentElement.clientHeight || document.body.clientHeight,
            scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight

        if (scrollHeight - scrollTop - clientHeight <= 500 && scrollHeight_sign !== scrollHeight) {
            page += 1;
            scrollHeight_sign = scrollHeight;
            ajax({'page': page, 'search': document.getElementById('search').value});
            setTimeout(function () {
                request_sign = true;
            }, 2000);
        } else {
            request_sign = true;
        }
    }
}

主要是注意 ① 下 document.onscroll 中的 500 数据是指剩余高度小于 500 后触发函数, 注意 setTimeout 函数是为了防止多次请求下的数据延迟。

用了很多依据来判断是否执行一个函数, 很冗余, 但是这些依据是我在开发中不得不使用的, 粗暴了点, 但是达成了理想中的效果。

代码片段可能会让你不知道逻辑, 尽可查阅源码文件, 便于你的理解。

源码文件将在 2020-10-17 发布到 GITBUH 中。