Доброго вечера!
Столкнулся с проблемой при написании самодельного разворачиваемого блока на JS. Суть функции банальна - постепенное увеличение высоты div (id = 'legend-bar') с нуля при первом нажатии на кнопку, и соотв-но уменьшение при втором.
Привожу код, который этим управляет:
legendButton.addEventListener("click", function () {
var height = legendBar.offsetHeight, //здесь запоминаем начальное значение высоты нашего блока
expand = function () {
var i = 0,
pxls = 'px';
/*ниже создаем таймер, который отрабатывает каждые 10 мс для обеспечения плавности
На каждом шаге таймера приращиваем высоту на 5 пикселей.*/
var cntrExpand = setInterval(function () {
document.getElementById('legend-bar').style.height = i + pxls;
i += 5;
if (i > 100) {
console.log("ending expand");
clearInterval(cntrExpand);
}
}, 10);
},
gripe = function () {
var i = 0,
pxls = 'px';
//здесь аналогично, только уже происходит уменьшение
var cntrGripe = setInterval(function () {
document.getElementById('legend-bar').style.height = height + pxls;
height -= 5;
if (height < i) {
clearInterval(cntrGripe);
}
}, 10);
};
//здесь происходит вызов функции в зав-ти от четного/нечетного значения счетчика (1 по дефолту)
if (legendCounter % 2 !== 0) {
expand();
} else {
gripe();
}
legendCounter++;
}, false);
Собственно проблема заключается в том, что из 4-х браузеров - Хром, ФФ, опера, ие 9 - ужасно тормозит в хроме при разворачивании/сворачивании, в остальных отрабатывает нормально, почему - не понимаю.
Кто-нибудь может подсказать почему данный код нагружает браузер?
Может быть привести какие-то дополнительные данные?