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