javascript - 如何为大量 HTML 元素优化 jQuery 函数

Question

我研究气候模型并将其显示在 map 网格上。我必须使用大网格:39x60。

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

$("#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

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

另一个低效率可能是多个 slide 事件可能会在您滑动时被触发；对您的处理程序施加限制可以加快处理速度。