在JavaScript中管理代价高昂的滚动的最佳方法？

Question

我们的主UI上有一个UI小部件，它使用JavaScript来响应来自浏览器的滚动事件。 对每个滚动事件的响应相对昂贵。 用户可以轻松地“排队”大量滚动事件，而前几个正在小部件中处理和呈现。

这样的问题是，小部件最终在“滚动处理炼狱”中，其中每个增量中间滚动事件被处理和呈现。

例如：用户已从ab滚动，然后是bc，然后是de，然后是ef，依此类推。 滚动事件处理可能仍然在用户触发yz事件时呈现bc滚动。

我们想要做的是对这些事件进行更智能的管理。 如果我们能够渲染滚动事件的结果，然后“赶上”到用户所在的位置，并跳过任何现在过时的中间滚动，那将是很棒的。

最好的方法是什么？

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