Как я могу оптимизировать функции jQuery для большого количества элементов HTML

Question

Я работаю над моделью климата и отображаю ее на сетке карты.Я должен использовать большую сетку: 39x60.

Так что я должен управлять 2340 <div> с помощью jQuery.Я хочу использовать ползунок 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'});
    }

Используется стоп согласно предложению Джейкобса.Это, по крайней мере, сделает его более эффективным в отношении того, остановится ли он, не знаю.