Лучший способ управлять дорогой прокруткой в ​​JavaScript?

Question

В нашем основном пользовательском интерфейсе есть виджет пользовательского интерфейса, который использует JavaScript для ответа на события прокрутки из браузера. Ответ на каждое событие прокрутки относительно дорог. Пользователь может легко «поставить в очередь» большой набор событий прокрутки, пока первые несколько обрабатываются и отображаются в виджете.

Проблема с этим заключается в том, что затем виджет попадает в «чистилище обработки прокрутки», где каждое событие промежуточной промежуточной прокрутки обрабатывается и обрабатывается.

Например: пользователь прокрутил от a-b до b-c, затем d-e, затем e-f и т. Д. Обработка события прокрутки может все еще работать над визуализацией прокрутки b-c к тому времени, когда пользователь запустил событие y-z.

Вместо этого мы хотели бы иметь более разумное управление этими событиями. Было бы здорово, если бы мы могли визуализировать результаты события прокрутки, затем «догнать», где бы ни находился пользователь, и пропустить любую из промежуточных прокруток, которые сейчас устарели.

Какой лучший способ сделать это?

Answer 1

Возможно, вы уже делаете что-то подобное, но я бы использовал таймер, который бы по существу определял, продолжает ли пользователь активно прокручивать.

Что-то похожее на это:

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