0

cycle.js で無限スクローラーを構築しています。ページごとに X 件の結果を返す ajax サービスがあります。最初のリクエストのページ ID は 0 ですが、後続のリクエストでは、最初の結果セットで返されたページ ID を使用する必要があります。結果は 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 リクエストがスクロール位置にリンクされていることと、スクロール中に複数のリクエストが発生する可能性があることです。

巻物をデバウンスした瞬間ですが、ここでは理想的ではありません。

必要なときに (ユーザーがページの下部にいるときに) 1 つの要求のみが送信されるように、ストリームを調整する方法についてのアイデアはありますか?

私はおそらくページごとに一意のIDを使用し、getitem $で.dropRepeatsを使用しますか? ただし、結果に一意のページ ID はありません。

4

1 に答える 1

0

scroll$ をフィルタリングして、ページの下部のみを取得できます。

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));
于 2016-11-23T02:33:36.380 に答える