pklauzinski / jscroll

An infinite scrolling plugin for jQuery.

Home Page:http://jscroll.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Duplicate and concurrent requests fired when scroll very fast

Shanison opened this issue · comments

Hi,

We are using jscroll to load ajax contents. After loading the first page, if you try to keep scrolling down very very fast. It will shows two loading html and then fire a lot of ajax requests to load subsequent pages.

In the library, there is an _observe function which is triggered whenever we scroll down. It has a way to prevent loading of next page until the previous request has been finished by leveraging the data.waiting value. When there is a previous request being sent to the server, this data.waiting is set to true and it is set to false after the data is returned.

                if (!data.waiting && iTotalHeight + _options.padding >= $inner.outerHeight()) {
                    //data.nextHref = $.trim(data.nextHref + ' ' + _options.contentSelector);
                    _debug('info', 'jScroll:', $inner.outerHeight() - iTotalHeight, 'from bottom. Loading next request...');
                    return _load();
                }

However, if you look at below code.

                        data.waiting = false;
                        data.nextHref = $next.attr('href') ? $.trim($next.attr('href') + ' ' + _options.contentSelector) : false;
                        $('.jscroll-next-parent', $e).remove(); // Remove the previous next link now that we have a new one
                        _checkNextHref();
                        if (_options.callback) {
                            _options.callback.call(this);
                        }

It looks like the data.waiting is set to false to early. Once it is set to false, the _observe will run and try to load the next page with previous link instead of the new next link. This only happens when we scroll very fast.

Should we set data.waiting = false to execute until the whole processing is done to prevent this issue?

                        data.nextHref = $next.attr('href') ? $.trim($next.attr('href') + ' ' + _options.contentSelector) : false;
                        $('.jscroll-next-parent', $e).remove(); // Remove the previous next link now that we have a new one
                        _checkNextHref();
                        if (_options.callback) {
                            _options.callback.call(this);
                        }
                        data.waiting = false;