Тормозит браузер

Рейтинг: 0Ответов: 1Опубликовано: 25.09.2014

Всем привет. Прошу помощи.

Есть такой участок кода:

<script>
      function setEqualizer(selector, timeout, colWidth) {
          if (!colWidth) {
              colWidth = 1;
          }
          $(selector).css({
              verticalAlign: 'bottom',
              lineHeight: $(selector).height() + 'px'
          });

          // Кол-во столбиков
          var colQuantity = Math.ceil($(selector).width()/colWidth);
          var cols = new Array(colQuantity);
          for (var i = 0; i < cols.length; i++) {
              var span = $('<span/>').appendTo(selector);
              span.css({
                  verticalAlign: 'bottom',
                  display: 'inline-block',

                  fontSize: 0,
                  lineHeight: 0,

                  width: colWidth,
                  background: 'pink',
                  borderTop: '2px solid red'
              });
          }

          run_equalizer(selector, timeout);
      }

      function run_equalizer (selector, timeout) {

          $(selector + ' span').each(function (i) {
              var colHeight = Math.round($(selector).height() * Math.random());
              $(this).height(colHeight);
          });

          $(selector + ' span').animate(
           {height: $(selector).height()/2},
              timeout,
              'linear',
              function () {

                  run_equalizer(selector, timeout);
              }
          );
      }

      window.onload = function () {
          setEqualizer('#eq_1 .equalizer', 1000, 2);
          setEqualizer('#eq_2 .equalizer', 1000, 2);
          setEqualizer('#eq_3 .equalizer', 1000, 2);
      }
    </script>

Анимация глючит и тормозит браузер. В чем дело?

Ответы

▲ 1

Проблема в том, что идет обращение сразу ко многим элементам, да еще и не самое эффективное. Как минимум, надо сократить количество ПОИСКА элементов:

$(selector + ' span').function1()...
$(selector + ' span').function2()...

Следует заменить на цепочку вызовов либо на

var elements_collection = $(selector + ' span');

elements_collection.function1()...
elements_collection.function1()...

Как ситуацию разрулить? Использовать canvas. Он прямо создан для рисования всяких таких штуковин.