Javascript "Unresponsive Script"添加 Jquery 事件处理程序

Question

我为 Movember 创建了一个小的 javascript 网页，让用户可以将我的 mustache “剃”成 mustache ，或者完全剃掉。

我通过用 div 网格覆盖剃光图片来完成此操作，其中包含具有不同偏移量的 mustache 图片。当用户将鼠标移到其中一个 div 上时，它会消失，并在下面的图片中显示剃光的皮肤。

问题是在创建 4000 个小 div 时，jquery.min.js 脚本不断弹出“无响应脚本”错误。

我希望有人能在我的代码中发现一些非常低效的地方，或者建议如何让 Jquery 喘口气。我什至尝试在代码运行时显示“正在加载...”旋转轮 gif，但 javascript 抛出沙漏的速度如此之快，以至于 gif 从未出现过。

代码如下:

<script type="text/javascript">
var isErase = false;
var isCover = false;
var size = 4;
var i = 0;
var j = 0;
$(document).ready(function(){
 for (i = 0; i < 400; i += size) {
  for (j = 0; j < 250; j += size) {
   $('#picture').append('<div class="piece" style="background-position:  -' + j + 'px -' + i + 'px;" />');
  }
 }
 $('div.piece').click(function(event){
  isCover = false;
  isErase = ! isErase;
  if (isErase) $('#mode').html(' *** SHAVING ***');
  else $('#mode').html('OFF');
 });
 $('div.piece').dblclick(function(event){
  isErase = false;
  isCover = ! isCover;
  if (isCover) $('#mode').html(' *** UNSHAVING ***');
  else $('#mode').html('OFF');
 });
 $("div.piece").mouseenter(function(event){
  if (isErase) { $(this).addClass('invisible'); }
  else if (isCover) { $(this).removeClass('invisible'); }
 });
});
</script>

Answer 1

<script type="text/javascript">
var isErase = false;
var isCover = false;
var size = 4;
var i = 0;
var j = 0;
var str = '';
$(document).ready(function(){
 for (i = 0; i < 400; i += size) {
  for (j = 0; j < 250; j += size) {
    str += '<div class="piece" style="background-position:  -' + j + 'px -' + i + 'px;" />';
  }
 }

 $('#picture').html(str).delegate('div.piece', 'click', function (event) {
  isCover = false;
  isErase = ! isErase;
  if (isErase) $('#mode').html(' *** SHAVING ***');
  else $('#mode').html('OFF');
 }).delegate('div.piece', 'dblclick', function(event) {
  isErase = false;
  isCover = ! isCover;
  if (isCover) $('#mode').html(' *** UNSHAVING ***');
  else $('#mode').html('OFF');
 }).delegate('div.piece', 'mouseenter', function(event) {
  if (isErase) { $(this).addClass('invisible'); }
  else if (isCover) { $(this).removeClass('invisible'); }
 });
});
</script>

您的代码中最大的低效之处如下:

1. 操作 DOM 100,000 次；每次添加一个新的 piece。使用 HTML 创建字符串并添加一次要快得多。
2. 不缓存您的 jQuery 选择器。您正在查找 ID 为“图片”的 div 并构建它的 jQuery 对象 100,000 次。每次使用 $('div.piece') 时，您都会查找所有 100,000 个。链接您的 jQuery 方法，或缓存对象。
3. 将同一事件绑定(bind)到所有 100,000 个piece。利用 Javascripts 事件冒泡，并将事件一次添加到元素的祖先(参见 delegate() )。