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/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");
        }
    });
  }
    });

Answer 2

我找到了解决问题的方法。我只在形状的鼠标输入事件中为我的形状初始化事件处理程序（调整大小/移动/单击/双击）。这也大大增加了加载时间。现在，立即调整形状大小。

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));
    });   
});

如果添加了很多div，则jquery resizable非常慢

2 个答案: