js加载更多

一.js监听是否需要加载更多
1.通过以下方法可以判断当前距离底部的距离，但是会执行多次，这里我们需要使用 throttle

window.onscroll = () => {
            // 文档高度
            const offsetHeight = document.documentElement.offsetHeight;
            // 屏幕高度
            const screenHeight = window.screen.height;
            // y轴偏移
            const scrollY = window.scrollY
            // 距离底部的距离
            const gap = offsetHeight - screenHeight - scrollY;
            if (gap < 100) {
                console.log("距离底部的距离 gap ::: ",gap);
            }
        }

2.封装一个方法

const createThrottle = (delay = 1000) => {
    let status = "START";
    return function throttle(fn) {
        if (status === "WARIING") {
            return;
        }
        status = "WARIING";
        setTimeout(() => {
            fn && fn() 
            status = "START";
        }, delay);
    };
}

二.使用

window.onscroll = () => {
            // 文档高度
            const offsetHeight = document.documentElement.offsetHeight;
            // 屏幕高度
            const screenHeight = window.screen.height;
            // y轴偏移
            const scrollY = window.scrollY
            // 距离底部的距离
            const gap = offsetHeight - screenHeight - scrollY;
            // console.log("offsetHeight ::: ",offsetHeight);
            // console.log("screenHeight ::: ",screenHeight);
            if (gap < 100) {
                this.throttle(() => {
                console.log("距离底部的距离 gap ::: ",gap);
                })
            }
        }