metafizzy / metafizzy/infinite-scroll

Requests keep happening before new items are appended

Open
#875 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
HTML
Stars
7.5k
Forks
1.7k
PR merge metrics
No merged PRs in 30d

Description

With the _append_ option set to **false**, so I can use JSON as response, what happens is:
if I have a tall enough element below the scroll element (e.g.: a footer), so that it's actually taller than the current window viewport, what will happen is that the _scrollThreshold_ will always be reached, and continue to trigger new requests before the loading and appending of new items are finished.

Since the append is made manually in the case of loading a JSON, and since it doesn't trigger the _append_ event, there is no way of determining if the appending actually finished.
If that was the case, I could set the _loadOnScroll_ option to **false** on the load event, and set it back to **true** on the append event to workaround the issue, like so:
```javascript
$container.on( 'load.infiniteScroll', function( event, response ) {
// parse response into JSON data
var data = JSON.parse( response );
// compile data into HTML
var itemsHTML = data.map(function(item) { return renderItemAsHtml(item)}).join('');
// convert HTML string into elements
var $items = $( itemsHTML );
// append item elements
$container.infiniteScroll( 'appendItems', $items );
// pause infinite scroll
$container.infiniteScroll( 'option', { loadOnScroll: false });
});

$container.on( 'append.infiniteScroll', function( ) {
// resume infinite scroll
$container.infiniteScroll( 'option', { loadOnScroll: true });
});
```
This does not work since the append event is never triggered

Here's a modified version of the "Loading JSON" codepen, that adds a tall element at the bottom of the page: https://codepen.io/anon/pen/ZZedBZ?editors=1111
If you scroll all the way to the bottom, it will stick there and you will see in the console that requests keep being triggered.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the repeated requests with the modified “Loading JSON” CodePen, using a tall element below the scroll area and append:false. Trace the loadOnScroll, appendItems, and append.infiniteScroll event flow; done means manually appending JSON-loaded items no longer causes overlapping requests and provides a usable completion event or equivalent behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, jquery
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.