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）。有沒有辦法優化它？

回答

相關問題