用Javascript无限滚动破坏按标题搜索

问题描述

我决定升级作为课程项目制作的应用程序。它是一个简单的库，每个用户都可以在其中添加电影，就像其他用户的电影一样。该应用程序有一个页面，其中所有电影都是可见的，我想使用分页显示每次获取10部电影，并实现无限滚动功能，该功能会自动获取另外10部电影，并将它们与旧电影一样渲染，直到最终所有这些电影都呈现出来。显示。

该应用程序使用sammy.js和Handlebars构建。还有一个按标题搜索的搜索字段。如果没有搜索条件，只需滚动即可查看所有电影，按预期方式工作-加载页面时将呈现10部电影，并滚动到最后显示动画，并加载10部，依此类推。滚动到底部并呈现所有可用电影时，搜索将按预期进行。然后，如果我搜索某项内容（例如一年），则结果会超过10，向下滚动会显示其余结果。

当我决定在任何滚动之前和所有电影都可见之前（新重新加载）进行搜索时，就会出现问题。然后，我确实获得了预期的结果，但是通过向下滚动（如果我要加载1个结果/ 1页，这将是不可能的），该页将开始加载所有没有搜索筛选器的可用电影。问题出在事件侦听器中，因为我尝试在控制台上记录“页面”，例如，当我搜索单个电影时，在事件监听器之外，“页面”变量设置为1，而该变量不应进入“ if”语句，但确实如此，然后由于某种原因，“ pages”再次为4。

下面是整个逻辑。我敢肯定问题出在那儿，但经过多次尝试却找不到。预先感谢！


export async function home() {
    this.partials = {
        header: await this.load('../templates/header.hbs'),footer: await this.load('../templates/footer.hbs'),loading: await this.load('../templates/loading.hbs'),moviePartial: await this.load('../templates/moviePartial.hbs')
    }
    const sammmy = this;
    const search = this.params.search || '';
    let count = await api.getCount(search);
    let pages = Math.ceil(count / 10);
    let page = pages / pages || 1;
    const movies = await api.getAll(search,page);
    let data;
    if (movies.length === 0) {
        data = localStorage;
    } else {
        data = Object.assign({ movies,search },localStorage);
    }
    window.addEventListener('scroll',async function () {
        let { scrollTop,scrollHeight,clientHeight } = document.documentElement;
        if (scrollHeight - clientHeight === scrollTop && pages > 1) {
            if (page <= pages + 1) {
                page++;
            }
            const loading = document.querySelector('.loading');
            loading.classList.add('show');
            const nmovies = await api.getAll(search,page);
            data.movies = data.movies.concat(nmovies);
            setTimeout(() => {
                loading.classList.remove('show');
                sammmy.partial('../templates/home.hbs',data)
            },1000);
            pages--;
        }
    })
    this.partial('../templates/home.hbs',data);
}```

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

handlebars.js javascript scroll