metafizzy / metafizzy/infinite-scroll
Requests keep happening before new items are appended
Nobody has claimed this yet.
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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