如果添加多個div，jquery可調整大小非常緩慢

Question

我正在使用jquery-ui編寫一個繪圖編輯器，您可以在其中添加/刪除形狀並移動和調整它們的大小。這一切工作正常。但是如果我添加太多形狀，那麼調整一個形狀的大小會變得非常慢。我做了一個jsfiddle，在那裏你可以看到它，但在我的編輯器中，它的速度慢了10倍，而且形狀更少。我想是因爲我有其他的事件處理程序。

這裏是調整大小是快速小提琴： http://jsfiddle.net/oh6e9k6k/

這裏慢一個有許多形狀（需要一些時間來加載）： http://jsfiddle.net/oh6e9k6k/1/

效果可以看到最好在Internet Explorer 。

是否有機會通過如此多的形狀提高性能？ 正如我在編輯中所說的那樣，即使更少的形狀也更慢。

我想避免做類似的事情，如僅當用戶單擊該形狀時才附加處理程序，並在調整大小/拖動完成時將其刪除，但如果沒有其他解決方案，則可能需要執行此操作。

這裏是形狀如何得到他們的功能：

$(".shape").resizable({ 
    start: function (event, ui) { 
     $(this).addClass("highliteShape"); 
    }, 
    stop: function (event, ui) { 
     $(this).removeClass("highliteShape"); 
    } 
}).draggable({ 
    cursor: "move", 
    start: function (event, ui) { 
     $(this).addClass("highliteShape"); 
    }, 
    stop: function (event, ui) { 
     $(this).removeClass("highliteShape"); 
    } 
}); 

我從實際應用截屏，顯示我的意思：HTTP：// screencast.com/t/r3xCwWdbp

Answer 1

我發現我的問題的方法。我只在形狀的鼠標輸入事件上爲我的形狀初始化事件處理函數（調整大小/移動/單擊/雙擊）。這也大大增加了加載時間。 立即調整形狀的大小。

http://jsfiddle.net/oh6e9k6k/3/

var maxSize = 2000; 

function InitShapeEventHandler($shape){ 
    if(!$shape.hasClass("ui-resizable")){ 
     $shape.resizable({ 
      start: function (event, ui) { 
       $(this).addClass("highliteShape"); 
      }, 
      stop: function (event, ui) { 
       $(this).removeClass("highliteShape"); 
      } 
     }).draggable({ 
      cursor: "move", 
      start: function (event, ui) { 
       $(this).addClass("highliteShape"); 
      }, 
      stop: function (event, ui) { 
       $(this).removeClass("highliteShape"); 
      } 
     }); 
    } 
} 


for(var x=0; x<maxSize; x+=35){ 
    for(var y=0; y<maxSize; y+=35){ 
     $("#ShapeContainer").append("<div class='shape' style='left:" + x + "px; top:" + y + "px;'></div>");   
    } 
} 




$(function() { 
    // add some dummy code 
    $(".shape").append("<div>x</div>"); 

    $(".shape").mouseenter(function(){ 
     InitShapeEventHandler($(this)); 
    }); 
}); 

Answer 2

我爲你演示使用異步函數來展示問題所在。你可以看到繪製這些盒子完全沒有時間，但是放大每個盒子的功能是最新的問題。無論如何，至少有了這個功能，你實際上可以看到somethig而不是等待。

演示（點擊完警報之後確定，會發現它需要的放大功能完成的時間）

http://jsfiddle.net/007k03jx/

$(document).ready(function() { 

    /// the Assync function. 

    var asyncFor = function(params) { 

     var defaults = { 
      total: 0, 
      limit: 1, 
      pause: 10, 
      context: this 
     }, 
      options = $.extend(defaults, params), 
      def = $.Deferred(), 
      step = 0, 
      done = 0; 

     this.loop = function() { 
      if (done < options.total) { 
      step = 0; 
      for (; step < options.limit; step += 1, done += 1) { 
       def.notifyWith(options.context, [done]); 
      } 
      setTimeout.apply(this, [this.loop, options.pause]); 
      } else { 
      def.resolveWith(options.context); 
      } 
     }; 

     setTimeout.apply(this, [this.loop, options.pause]); 
     return def; 
     }; 

var maxSize = 2000; 
var x=0; 

    asyncFor({ 
     total:50,  
     context: this 
    }).progress(function(step) { 

var y=0; 
    for(var y=0; y<maxSize; y+=35){ 

$("#ShapeContainer").append("<div class='shape' style='left:" + x + "px; top:" + y + "px;'><div>x</div></div>"); 



    } 

x+=35; 


    }).done(function() { 

    alert("finished") 
resize() 
    }); 

    function resize() { 
        $(".shape").resizable({ 
     start: function (event, ui) { 
      $(this).addClass("highliteShape"); 
     }, 
     stop: function (event, ui) { 
      $(this).removeClass("highliteShape"); 
     } 
    }).draggable({ 
     cursor: "move", 
     start: function (event, ui) { 
      $(this).addClass("highliteShape"); 
     }, 
     stop: function (event, ui) { 
      $(this).removeClass("highliteShape"); 
     } 
    }); 
    } 
    });