JQuery:我的 'scroll' 事件非常慢。我究竟做错了什么？

我有 4 个 DIV，当您滚动其中一个 div 时，我希望触发 scroll 事件。这是下面的代码。

$('#div1, #div2, #div3, #div4').scroll(function() {
    alert('...');
});

在 Firefox/Chrome 中，这运行得很快；但是，在 Internet Explorer 中，它运行得太慢以至于它实际上阻止了我滚动 div。

我正在使用最新版本的 JQuery (v.1.4.1)。

问题 :有没有更有效的方式来运行上面的代码？如果是这样，如何？

UPDATE :既然有人问了，我就在我的整个代码下面包含了:

$('#div1, #div2, #div3, #div4').scroll(function() {
   /* find the closest (hlisting) home listing to the middle of the scrollwindow */
    var scrollElemPos = activeHomeDiv.offset();
    var newHighlightDiv = $(document.elementFromPoint(
        scrollElemPos.left + activeHomeDiv.width()  / 2,
        scrollElemPos.top  + activeHomeDiv.height() / 2)
    ).closest('.hlisting');
    if(newHighlightDiv.is(".HighlightRow")) return;
    $('.HighlightRow').removeClass("HighlightRow");
    newHighlightDiv.addClass('HighlightRow');

   /* change the map marker icon to denote the currently focused on home */
   var activeHomeID = newHighlightDiv.attr("id");
   if (activeHomeMarkerID) {
      // unset the old active house marker to a normal icon
      map.markers[activeHomeMarkerID].setIcon('http://example.com/images/house-icon.png');
   }
   activeHomeMarkerID = activeHomeID.substring(4); // set the new active marker id
   map.markers[activeHomeMarkerID].setIcon('http://example.com/images/house-icon-active.png');
});

更新 2:

所以我在下面和 IE 中实现了计时器选项，它仍然很慢。还有其他想法吗？

最佳答案

在 IE 中，滚动事件的调度方式比在 Firefox 中更频繁。您正在事件处理程序中执行许多 DOM 操作，使其运行速度变慢。

考虑在用户停止或暂时暂停滚动时执行所有这些操作。这是一篇关于如何实现这种技术的文章 - http://ajaxian.com/archives/delaying-javascript-execution

编辑 :这是一个实现

var timer = 0,
    delay = 50; //you can tweak this value
var handler = function() {
    timer = 0;
    //all the stuff in your current scroll function
}

$('#div1, #div2, #div3, #div4').scroll(function() {
    if (timer) {
        clearTimeout(timer);
        timer = 0;
    }
    timer = setTimeout(handler, delay);
});

编辑 2 :
你能附上一个分析器(比如 IE8 分析器)，看看什么运行缓慢？你的 DOM 有多复杂？

以下是一些提高代码性能的想法:

你真的需要每次都测量activeHomeDiv.offset()吗？您可以测量一次并将其存储在某个地方(如果位置不变)？测量大小会导致浏览器重绘。

将 newHighlightDiv.is(".HighlightRow") 改为 newHighlightDiv.hasClass("HighlightRow")

$('.HighlightRow').removeClass("HighlightRow") - 添加元素前缀并从 id 选择器/元素引用下降，例如 $('div.HighlightRow', '#ancestorDiv') 。

关于JQuery:我的 'scroll' 事件非常慢。我究竟做错了什么？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/2158268/