Geek asks and answers

Best way to manage costly scrolling in JavaScript?

We have a user interface widget in our main user interface, which uses JavaScript to respond to scrolling events from the browser. The answer to each scroll event is relatively expensive. The user can easily "queue" a large set of scroll events, while the first few are processed and visualized inside the widget.

The problem is that then the widget ends in a “scrolling cleanup”, where each incremental intermediate scroll event is processed and visualized.

For example: The user scrolls from ab, then bc, then de, then ef, etc. Handling scroll events may still work on visualizing the bc scroll by the time the user fires the yz event.

Instead, we would like to manage these events more intelligently. It would be great if we could display the results of the scroll event, then “catch up” to the place where the user is, and skip any of the intermediate scrolls that are now out of date.

What is the best way to do this?

+3
source share
1 answer

You may already be doing something similar, but I would use a timer that essentially determines whether the user will actively scroll.

Something like this:

// need to have this variable outside the scope of the handler defined below
var timeoutId = null;

// think of "connect" as pseudocode for whatever you use to connect handlers
connect(widget, "onscroll", function() {
    // ...scrolling...
    if(timeoutId != null) clearTimeout(timeoutId);
    timeoutId = setTimeout(function() {
        // *probably* done scrolling, it has been  
        // 1 second since the last scroll...  
        // run your code to render current position here  
    }, 1000);
});
+2
source

More articles:


All Articles