ui-scroll: Disable update/fetch while scrolling

Question

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)
        {
        });

    };

score 0 · Answer 1 · answered Dec 21 '19 at 03:14

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
```
$scope.datasource.minIndex = 1
$scope.datasource.maxIndex = 10000
```
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 indexes
The last thing is indexToReload, it should be calculated by current scroll position and item height:
```
indexToReload = Math.floor(scrollTop/itemHeight)
```

ui-scroll: Disable update/fetch while scrolling

1 Answers1