I am trying to use ui-scroll to provide dynamic scrolling through a large dataset.
The get
method calls a back end function which queries a database. The query is "slow" so I'd like to disable queries while the scroll thumb is moving.
For example, suppose the viewport shows 10 rows and there are 100,000 rows in the database and we fetch 100 rows at a time.
If you quickly drag the thumb from the top to the bottom, ui-scroll
currently makes lots and lots of requests for data. I'd like to skip all of the intermediate requests and only fetch data when the thumb stops moving.
I've fiddled with isLoading
on the adapter but couldn't find a way to make this work.
Suggestions? Angular 1.4.1.
$scope.datasource = { };
$scope.datasource.get = fetchData
$scope.datasource.minIndex = 0;
$scope.datasource.maxIndex = 10553;
$scope.scrollAdaptor = {};
var loadCount = 0;
function fetchData(desc, successCb)
{
var start = desc.index;
var end = desc.index + desc.count - 1;
var url = "scrollTest.php?start=" + start + "&end=" + end;
$http.get(url)
.then(function(goodResp)
{
console.log("got data, loadCount", loadCount);
successCb(goodResp.data);
},
function(badResp)
{
});
};
There is a discussion on GitHub related to the question. In short, angular-ui-scroll can't skip intermediate requests out-of-box, but following workaround might help.
Set min/max indexes on start to make the viewport relevant to 100,000 rows
Bind additional scroll event to intercept user scrolling over the viewport
Check scroll position delta between two events, and if it is more than some fixed value (say, 500px), rebuild the viewport
Rebuild means
adapter.reload(indexToReload)
method call and setting min/max indexesThe last thing is
indexToReload
, it should be calculated by current scroll position and item height: