Question

我正在cycle.js中构建一个无限卷轴。我有一个ajax服务，每页返回X个结果。第一个请求的页面标识为0，但后续请求需要使用第一个结果集中返回的页面标识。结果放在dom中。当用户滚动到可见结果的底部时，将加载一个新集并将其连接到列表。我有一些有用的东西，但不如我想的那么好。

缩短版本如下：

const onScroll$ = sources.DOM.select('document').events('scroll')
    .map((e) => {
      return e.srcElement.scrollingElement.scrollTop;
    })
    .compose(debounce(1000));

  const onHeight$ = sources.DOM.select('#items').elements()
    .map((e) => {
      return e[0].scrollHeight;
    })

  const scroll$ = onScroll$.startWith(0);
  const height$ = onHeight$.startWith(0);

  const itemsXHR$ = sources.HTTP.select('items')
    .flatten();

  const id$ = itemsXHR$
    .map(res => res.body.data.content.listPageId)
    .take(2)
    .startWith(0);

  const getitems$ = xs.combine(scroll$,height$,id$)
    .map( ( [scrollHeight, contentHeight, sid, lp] ) => {
      if ( scrollHeight > (contentHeight - window.innerHeight - 1) ) {
        const ms = new Date().getTime();
        return {
           url: `data/${sid}?_dc=${ms}`,
          category: 'items',
          method: 'GET'
        };
      }
      return {};
    });

  const items$ = itemsXHR$
    .fold( (acc=[],t) => [...acc, ...t.body.data.content.items] ) 
    .startWith(null);

  const vdom$ = items$.map(items =>
    div('#items', [
      ul('.search-results', items==null ? [] : items.map(data =>
        li('.search-result', [
          a({attrs: {href: `/${data.id}`}}, [
            img({attrs: {src: data.url}})
          ])
        ])
      ))
    ])
  );

主要问题是ajax请求链接到滚动位置，并且可能在滚动期间触发多个请求。

当我去除卷轴的那一刻，但这在这里并不理想。

有关如何编排流的任何想法，以便在需要时（当用户靠近页面底部时）只发送一个请求？

我可能每页都有一个唯一的ID，并在getitem $上使用.dropRepeats？我的结果中没有唯一的页面ID。

Answer 1

您可以过滤滚动$以仅占据页面底部。

const onScroll$ = sources.DOM.select('document').events('scroll')
.map((e) => {
  return e.srcElement.scrollingElement.scrollTop;
})
.filter( /* filter by checking scrollTop is near bottom */ )
.compose(debounce(1000));

Cycle.js流组合以确保单个AJAX请求

1 个答案: