添加Jquery事件处理程序的Javascript“无响应脚本”

我为Movember创建了一个小小的javascript网页，让用户把我的胡子剃成小胡子，或者完全剃掉

我用一个网格覆盖一张剃过毛的照片，用不同的偏移量固定有胡子的照片。当用户将鼠标移到其中一个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>

---

这在safari中对我很有帮助，但无论如何我都不认为这是真正适合HTML和JavaScript的东西

<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;" />');
  }
 }
 $("#picture").live('click',function(event){
  isCover = false;
  isErase = ! isErase;
  if (isErase) $('#mode').html(' *** SHAVING ***');
  else $('#mode').html('OFF');
 });
 $("#picture").live('dblclick',function(event){
  isErase = false;
  isCover = ! isCover;
  if (isCover) $('#mode').html(' *** UNSHAVING ***');
  else $('#mode').html('OFF');
 });
 $("div.piece").live('mouseenter',function(event){
  if (isErase) { $(this).addClass('invisible'); }
  else if (isCover) { $(this).removeClass('invisible'); }
 });
});
</script>

---

这在safari中对我很有帮助，但无论如何我都不认为这是真正适合HTML和JavaScript的东西

<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;" />');
  }
 }
 $("#picture").live('click',function(event){
  isCover = false;
  isErase = ! isErase;
  if (isErase) $('#mode').html(' *** SHAVING ***');
  else $('#mode').html('OFF');
 });
 $("#picture").live('dblclick',function(event){
  isErase = false;
  isCover = ! isCover;
  if (isCover) $('#mode').html(' *** UNSHAVING ***');
  else $('#mode').html('OFF');
 });
 $("div.piece").live('mouseenter',function(event){
  if (isErase) { $(this).addClass('invisible'); }
  else if (isCover) { $(this).removeClass('invisible'); }
 });
});
</script>

您的代码中最大的低效率如下所示：

操作DOM 100000次；每次添加一个新的片段。用HTML创建一个字符串并添加一次要快得多。 不缓存jQuery选择器。您正在查找id为“picture”的div，并为其构建了100000次jQuery对象。每次使用$'div.piece'，都会查找所有100000个。要么链接jQuery方法，要么缓存对象。 将同一事件绑定到所有100000件。利用Javascripts事件冒泡，将事件添加到元素的祖先中一次，请参见。 您的代码中最大的低效率如下所示：

操作DOM 100000次；每次添加一个新的片段。用HTML创建一个字符串并添加一次要快得多。 不缓存jQuery选择器。您正在查找id为“picture”的div，并为其构建了100000次jQuery对象。每次使用$'div.piece'，都会查找所有100000个。要么链接jQuery方法，要么缓存对象。 将同一事件绑定到所有100000件。利用Javascripts事件冒泡，将事件添加到元素的祖先中一次，请参见。

---

啊，我知道你在那里做了什么。谢谢你非常清楚和有启发性的解释。实际上只有6200个div.piece对象400/4*248/4，但您的观点仍然有效。我从未与DOM如此亲密地合作过，以至于性能成为一个问题。现在我知道了在这里插入GI Joe的流行语。而且，刚刚发现了这个，现在感觉自己像个十足的白痴。谢谢你的帮助！啊，我知道你在那里做了什么。谢谢你非常清楚和有启发性的解释。实际上只有6200个div.piece对象400/4*248/4，但您的观点仍然有效。我从未与DOM如此亲密地合作过，以至于性能成为一个问题。现在我知道了在这里插入GI Joe的流行语。而且，刚刚发现了这个，现在感觉自己像个十足的白痴。谢谢你的帮助！谢谢你的反馈。我倾向于同意，基于性能，它不是一个合适的应用程序；我将尝试Matt提到的技巧并汇报。感谢您的反馈。我倾向于同意，基于性能，它不是一个合适的应用程序；我将尝试马特提到的技巧，并汇报。