Question

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

这个问题是，小部件最终会出现在“滚动处理炼狱”中，每个增量中间滚动事件都会被处理和渲染。

例如：用户从a-b滚动，然后是b-c，然后是d-e，然后是e-f，依此类推。滚动事件处理可能仍然在用户触发y-z事件时渲染b-c滚动。

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

最好的方法是什么？

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

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

1 个答案: