JQuery: CRAZY slow scroll event. What am I doing wrong?

I have 4 DIVthat I want to have an event scrollwhen you scroll through one of these divs. This is the code below.

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

In Firefox / Chrome, this is fast; however, in Internet Explorer, it works so slowly that it actually does not allow me to scroll through the div.

I am using the latest version of jQuery (v.1.4.1).

Question : Is there a more efficient way to run the code above? If so, how?

UPDATE . Since it was set, I included below all my code:

$('#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');     
});

UPDATE 2:

So, I applied the timer parameter below and in IE, it is still just as slow. Any other ideas?

+3
1

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').
+6

Source: https://habr.com/ru/post/1730473/


All Articles