How do I increase efficiency/speed while using jQuery hover?

Question

In a web application that I am writing, I have a series of divs which create a grid. The grid is X divs by Y divs, based on user input. Using jQuery hover function, I would like to change the background color of all surrounding divs within a certain distance. Basically, if I hover over a div, all divs within 4 rows and 4 columns away should also change their background color. I can get this functioning fine, but when the grid becomes 32 by 128 divs there is a real performance issue and the hover effect noticeably lags behind the mouse. I am almost certain that it is because of the large amount of similar divs within the DOM because the issue is not there when the grid is something like 30 by 30.

This is the basic structure of my html:

<div class="table_area">
    <div class="table_row" id="row-0">
        <div class="cap" data-row="0" data-column="0"></div>
        <div class="cap" data-row="0" data-column="1"></div>
        ...
    </div>
    <div class="table_row" id="row-1">
        <div class="cap" data-row="1" data-column="0"></div>
        <div class="cap" data-row="1" data-column="1"></div>
        ...
    </div>
    ...
</div>

To try to speed up the search of the DOM, I have added each row to an array. Thus, $('div.table_row[data-row="0"]') would be in arr[0]. So when a div in row 8 is hovered, I only check arr[4] through arr[12] for the necessary divs.

I would think that this would speed up the process quite a bit, since I am eliminating a substantial amount of the searching, but there is still a very noticeable lag in the hover.

Is there anything blatantly wrong with how I set this up? I am using the latest version of Chrome, if that matters.

can you setup a small demo? there may be other areas that you can optimize. — user400654
– user400654, Commented Jan 18, 2013 at 18:25
Without seeing your code, I suspect at least part of your problem is that you are probably firing a whole slew of hover events as you move across your table. You might look at this question and see if you can delay the hover for a few milliseconds. — Matt Burland
– Matt Burland, Commented Jan 18, 2013 at 18:29

Diodeus - James MacFarlane · Accepted Answer · 2013-01-18 18:25:47Z

1

Selecting by class name is native to the browser, whereas selecting by data within an element depends on looping within jQuery.

Use class names to label your rows and columns and your selector will be much faster.

answered Jan 18, 2013 at 18:25

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

cspada Over a year ago

Thanks I'll try it out! I always thought that class name was the slowest. Good to know!

user400654 Over a year ago

this depends on browser, selecting by data attribute is done with queryselectorall.

cspada Over a year ago

I use arr[0].children('[data-column=1][data-row=3]'); I assumed that would be efficient enough to the point where using class OR data attribute wouldn't matter

Matt Burland Over a year ago

The OP says they are already caching rows in an array, which is a good idea. I'd probably just cache all the cells in a 2D array for quicker lookup of both rows and columns.

John Koerner · Accepted Answer · 2013-01-18 20:07:26Z

0

If you add a class to each of the caps, you can then dynamically build a massive selector:

  var sel = "";
$(".cap").hover(function () {
    var row  = $(this).data("row");
    var col = $(this).data("column");
    sel = "";
    for(var i=row-2; i<=row+2; i++)
    {
      for(var j=col-2; j<=col+2; j++)
      {
        sel += ".r" + i + ".c" + j + ",";
      }
    }
  sel = sel.slice(0,-1);
  $(sel).css("background-color","blue");
},function () {
    $(sel).css("background-color","white");
  });
});

Example: http://jsbin.com/izeyal/38/edit

Since I was dynamically creating the rows and columns, I also added ids to each of the rows, which you can use for testing if you want by changing the selector generation code:

  sel += "#r" + i + "c" + j + ",";

For completeness, the code I used to generate the grid:

  for(i=0; i<128; i++)
  {
    var newRow = $('<div/>', {
    id: 'row-' + i
}).appendTo('.table_area');
    for (j=0; j<32; j++)
    {
      var rowid= "r" +i + "c" + j;
      $('<div/>', {id: rowid }).data("row",i).data("column",j).addClass("cap r" + i + " c" + j).appendTo(newRow);  
    }
  }

answered Jan 18, 2013 at 20:07

John Koerner

38.2k8 gold badges93 silver badges143 bronze badges

1 Comment

cspada Over a year ago

Thank you! I believe that this is the most responsive I will get it with the way that I have the grouping of divs set up! I was unaware that the same selector could be used for the mouse exit as well. Makes sense! Thanks a lot!

Collectives™ on Stack Overflow

How do I increase efficiency/speed while using jQuery hover?

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related