JavaScript代码很慢（JQuery）。有没有办法优化它？

-2

我在做的是绘制矩形在一个div（“#gd_graphics_grid”）与div作为像素。问题是它有点慢。在Chrome上它可能没问题（有点慢），但在IE上它是一场噩梦（我知道这很正常，因为IE JavaScript引擎速度很慢）。我想知道是否有优化的代码的方式（试了一下，但没成功）：JavaScript代码很慢（JQuery）。有没有办法优化它？

这里的HTML/PHP产生的div：

<div id="gd_graphics"> 
    <p id="gd_loader">Veuillez patienter!</p> 
    <div id="gd_graphics_grid"> 
     <?php for($row = 0; $row < 73; $row++) : ?> 
     <div class="gd_grid_row"> 
      <?php for($block = 0; $block < 130; $block++) : ?> 
      <div class="gd_grid_block"><div class="gd_grid_block_wrap"></div></div> 
      <?php endfor; ?> 
      <div class="gd_hidden"></div> 
     </div> 
     <?php endfor; ?> 
    </div> 
</div>

而这里的JavaScript的（仅这刷新（和减缓我的代码）的部分：

function RefreshDrag() 
{ 
    $(".gd_selected_block").removeClass("gd_selected_block"); 

    if(startX <= endingX) 
    { 
     var minX = startX; 
     var maxX = endingX; 
    } 
    else 
    { 
     var minX = endingX; 
     var maxX = startX; 
    } 

    if(startY <= endingY) 
    { 
     var minY = startY; 
     var maxY = endingY; 
    } 
    else 
    { 
     var minY = endingY; 
     var maxY = startY; 
    } 

    var $row = null; 
    var $block = null; 
    var $left = null; 
    var $right = null; 
    var $this = null; 
    var rowIndex = null; 

    $(".gd_grid_row").slice(minY, maxY+1).each(function() { 
     $row = $(this); 
     rowIndex = $row.index(); 

     if(rowIndex == minY || rowIndex == maxY) 
     { 
      $row.children(".gd_grid_block").slice(minX, maxX+1).find(".gd_grid_block_wrap").each(function() { 
       $this = $(this); 

       $this.addClass("gd_selected_block"); 
      }); 
     } 
     else 
     { 
      $left = $row.children(".gd_grid_block").eq(minX).find(".gd_grid_block_wrap"); 
      $right = $row.children(".gd_grid_block").eq(maxX).find(".gd_grid_block_wrap"); 

      $left.addClass("gd_selected_block"); 

      $right.addClass("gd_selected_block"); 
     } 
    }); 

}

.gd_selected_block是改变的div去底色一类在此先感谢（充当线）

来源

2012-04-26 maniak

究竟什么是你想模拟拖放？ http://jqueryui.com/demos/droppable/ – 2012-04-26 19:47:26

我真诚的建议是找到一种完全不同的方法。使用单独的DIV作为像素就像用牙签建造鸟舍。 – Blazemonger 2012-04-26 19:48:39

你不应该那样做。如果是D＆D，请按照Harvey的建议去做。如果您更一般地想制作快速动画，请使用SVG或HTML5 Canvas。 – 2012-04-26 19:48:53

为什么。您这样做，在2012年？

使用一些SVG库，如Raphael或使用HTML canvas元素。

如果你想坚持自己的风格，尽量使用DIV边框直线，或IMG作为线和重新定位他们，虽然我不知道你正在努力实现

来源

2012-04-26 19:53:59

我试过这种方法，因为我不需要复杂的绘图工具...只需要绘制几个矩形来定义区域.. – maniak 2012-04-26 20:09:18

@躁狂症其他方法更简单，直观和更快 – 2012-04-26 20:13:24

JavaScript代码很慢（JQuery）。有没有办法优化它？

回答

相关问题