我如何提高效率/速度，而使用jQuery悬停

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

本文关键字：jQuery 悬停 速度 提高效率      更新时间：2023-09-26

在我正在编写的web应用程序中，我有一系列创建网格的div。网格是基于用户输入的Xdiv乘Ydiv。使用jQuery悬停功能，我想改变周围所有div在一定距离内的背景颜色。基本上，如果我悬停在一个div上，所有div在4行和4列之外也应该改变他们的背景颜色。我可以让它正常运行，但当网格变成32乘128div时，就会出现真正的性能问题，悬停效果明显滞后于鼠标。我几乎可以肯定，这是因为DOM中有大量类似的div，因为当网格是30 × 30时，问题就不存在了。

这是我的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>

为了加快DOM的搜索速度，我将每一行添加到一个数组中。因此，$('div.table_row[data-row="0"]')会在arr[0]中。因此，当第8行中的div悬停时，我只检查arr[4]到arr[12]的必要div。

我认为这会大大加快这个过程，因为我消除了大量的搜索，但是在悬停时仍然有一个非常明显的延迟。

我的设置有什么明显的错误吗?我使用的是最新版本的Chrome浏览器，如果这很重要的话。

根据类名进行选择是浏览器自带的，而根据元素内的数据进行选择则取决于jQuery内部的循环。

使用类名来标记你的行和列，你的选择器会快得多。

如果您为每个大写添加一个类，那么您可以动态构建一个大型选择器:

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

示例:http://jsbin.com/izeyal/38/edit

由于我是动态地创建行和列，所以我还为每一行添加了id，如果您想通过更改选择器生成代码来进行测试，您可以使用它:

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

为了完整起见，我用来生成网格的代码:

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

相关文章：