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

发布于 2024-11-30 09:07:07 字数 791 浏览 1 评论 0原文

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

所以我必须用 jQuery 管理 2340

。我想使用 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 会崩溃。

有办法解决这个问题吗？

原文

I work on a climate model and I display it on a map grid. I have to use a large grid : 39x60.

So I have to manage 2340 <div> with jQuery. I want to use a jQuery slider to zoom in / out with this :

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

Each cell is built as this example :

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

But firefox crashes when the function is executed.

Is there a way to fix this problem ?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

大姐，你呐 2024-12-07 09:07:07

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

另一个效率低下的问题可能是滑动时可能会触发多个 slide 事件；对你的处理程序施加节流阀可以加快速度。

回复收藏 0 原文

残龙傲雪 2024-12-07 09:07:07

您是否打算将每个索引设置得更大一些？这意味着无论滑块朝哪个方向移动，它们都会变得越来越大。我认为最好存储一个参考值。

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

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

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

Was it your intention to set each one larger by what index it has? That will mean no matter which way the slider goes they will get bigger, much bigger. Better to store a reference value I think.

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

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

Used stop as per Jacobs suggestion.
This will at least make it more efficient, as to whether it stops crashing, no idea.

回复收藏 0 原文

~没有更多了~