ElasticSearch无限滚动底部检测误触发，如何确保元素可见满1秒再执行请求

核心通过定时器校验底部元素的可见停留时长，进入视口时启动倒计时，离开时销毁定时器，完全避免DOM更新阶段的短暂可见误触发，无需硬编码高度限制。

修改后代码示例 #

<div class="search-area">
    <div id="ajax-in-results">
        <!-- 搜索结果渲染节点 -->
    </div>
    <i id="this-is-the-bottom"></i>
</div>

<script>
// 存储延时触发定时器标识
let loadMoreTimer = null;

const observer = new IntersectionObserver((entries) => {
    const bottomEntry = entries[0];
    // 底部元素完全进入视口时启动1秒倒计时
    if (bottomEntry.isIntersecting) {
        loadMoreTimer = setTimeout(() => {
            // 原有请求去重、初始化状态校验逻辑保留
            if (this.lastRequestId !== this.requestId && this.initialized) {
                window.EventBus.$emit('search-set-page', this.current + 1);
                this.lastRequestId = this.requestId;
            }
        }, 1000);
    } else {
        // 底部元素离开视口时清空定时器，取消触发
        clearTimeout(loadMoreTimer);
    }
}, {
    rootMargin: '0px',
    threshold: 1.0
}).observe(document.querySelector('#this-is-the-bottom'));

// 可选补充：组件卸载、搜索重置时清理逻辑，避免内存泄漏
/*
// Vue 示例
onUnmounted(() => {
    clearTimeout(loadMoreTimer);
    observer.disconnect();
})

// 搜索条件变更重置时调用
const resetSearch = () => {
    clearTimeout(loadMoreTimer);
    // 其他重置逻辑...
}
*/

兼容优化说明 #

• 原有请求防抖、去重逻辑可完全复用，无需调整
• 1秒时长可根据业务需求灵活调整，不影响整体逻辑
• 适配所有屏幕尺寸、动态结果高度的场景，无硬编码依赖

内容的提问来源于stack exchange，提问作者Martyn Ball