Question

我在气候模型上工作，并将其显示在地图网格上。我必须使用大网格：39x60。

所以我必须使用jQuery管理2340 <div>。我想使用jQuery滑块来放大/缩小：

$("#zoom_slider").slider({
        orientation: "vertical",
        value: 1,
        min: 1,
        max: 10,
        step: 1,
        slide: function( event, ui ) {
            $('.case').css('width', function(index) {
                return index * ui.value;
            });

            $('.case').css('height', function(index) {
                return index * ui.value;
            });
        }
    });

每个单元格都是按照此示例构建的：

<div id="c13_53" class="case line_13 col_53" style="width: 17px; height: 17px; top: 216px; left: 937px;"></div>

但是当执行该函数时，firefox会崩溃。

有没有办法解决这个问题？

Answer 1

代码效率低下的原因是您每次div次事件重新选择slide次。 $('.case')强制扫描整个DOM。您应该将元素缓存在变量中并重用该变量，而不是不断重新扫描。

另一个效率低下的问题可能是，当您滑动时，多个slide事件可能会被触发;给你的处理程序加油门可以加快速度。

Answer 2

你打算用它的索引来设置每一个吗？这意味着无论滑块走向哪个方向，它们都会变得更大，更大。我认为最好存储一个参考值。

//Size in pixels.
var originalSize = 20,
    cases = $('.case');

 stop: function(_, ui) {
        var size = ui.val * originalSize;
        cases.css({width: size + 'px', height: size + 'px'});
    }

按照雅各布的建议使用停止。这至少会使它更有效率，它是否会停止崩溃，不知道。

如何针对大量HTML元素优化jQuery函数

2 个答案: