Implementing Scroll-Based Lazy Loading, Event Throttling, and Request Locking for Frontend Pagination

When a page needs to display a large amount of data, developers often replace traditional pagination with scroll‑based lazy loading to reduce server response time and improve first‑screen rendering, especially on mobile where seamless scrolling is expected.

Listening to Scroll

The page triggers a data request when the distance between the document bottom and the viewport bottom falls below 200px . The following code demonstrates the basic detection and request call:

function load() {
    console.log('loading');
}
$(window).scroll(function(){
    var scrollTop = $(window).scrollTop();
    var windowHeight = $(window).height();
    var scrollHeight = $(document).height();
    var distance = scrollHeight - scrollTop - windowHeight;
    if(distance < 200){
        load();
    }
});

Because the scroll event fires continuously, the request can be triggered repeatedly while the user scrolls, defeating the purpose of pagination.

Event Throttling

To avoid rapid repeated triggers, a 60 ms quiet period is enforced after each request. If another scroll occurs within this interval, the previous timer is cleared and restarted, ensuring only one request is sent per interval.

$(window).scroll(function(){
    if (timeoutId) {
        clearTimeout(timeoutId);
    }
    timeoutId = setTimeout(function(){
        var scrollTop = $(window).scrollTop();
        var windowHeight = $(window).height();
        var scrollHeight = $(document).height();
        var distance = scrollHeight - scrollTop - windowHeight;
        if(distance < 200){
            lazyLoad();
        }
    }, 60);
});

After throttling, the request is only sent when scrolling stops, but if the response is slow and the user continues scrolling, multiple requests may still be issued and responses can arrive out of order.

Event Lock

A loading flag is introduced to lock the request pipeline: while a request is pending ( loading = true ), new requests are ignored. The flag is cleared when the request completes.

var loading = false;
function append(){
    console.log('append element to document');
}
function load(){
    loading = true;
    $.ajax({
        url: 'api.xxx.com'
    }).done(function(res){
        append();
        loading = false;
    });
}
$(window).scroll(function(){
    var scrollTop = $(window).scrollTop();
    var windowHeight = $(window).height();
    var scrollHeight = $(document).height();
    var distance = scrollHeight - scrollTop - windowHeight;
    if(distance < 200 && !loading){
        load();
    }
});

By checking the loading state, only one request runs at a time, preventing duplicate data and preserving order.

UI Optimization

During data loading, a GIF animation is shown at the bottom of the page to reassure users that more content is being fetched. When the last page is reached, the GIF is replaced with a "No more data" message.

Error Handling

If an API error occurs, the loading animation is swapped for a retry button, allowing the user to manually trigger a second request.

Scroll Compatibility

Note that some WebView implementations, especially iOS 7 and earlier, pause CSS3 animations and JavaScript execution during scrolling. Developers should test their target environments to ensure smooth lazy‑loading behavior.

Overall, these techniques—scroll detection, throttling, request locking, UI feedback, and error handling—provide a robust solution for seamless infinite scrolling in front‑end applications.