Лучший способ управлять дорогостоящей прокруткой в JavaScript?
У нас есть виджет пользовательского интерфейса в нашем основном пользовательском интерфейсе, который использует JavaScript для ответа на события прокрутки из браузера. Ответ на каждое событие прокрутки относительно дорого. Пользователь может легко «поставить в очередь» большой набор событий прокрутки, пока первые несколько обрабатываются и отображаются в виджете.
Проблема заключается в том, что затем виджет попадает в «чистилище обработки прокрутки», где обрабатывается и отображается каждое промежуточное событие прокрутки.
Например: пользователь пролистал от a-b, затем b-c, затем d-e, затем e-f и так далее. Обработка события прокрутки может все еще работать над визуализацией прокрутки b-c к тому времени, когда пользователь инициировал событие y-z.
Вместо этого мы хотели бы более разумно управлять этими событиями. Было бы замечательно, если бы мы могли визуализировать результаты события прокрутки, затем «догнать», где бы ни находился пользователь, и пропустить любые промежуточные прокрутки, которые теперь устарели.
Как лучше всего это сделать?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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);
});