Доброго времени суток всем! Использую для одного из проектов данный плагин и столкнулся с некоторыми сложностями. Мне понадобилось организовать поиск по тегу map, найти и подсветить все area подходящие под некоторые условия. На данный момент написал такой код:
function updateRange(min, max){
var area = $("area[status=freedom],area[status=reserved]");
for(var i = 0; i < area.length; i++){
var price = area.eq(i).attr("square") * area.eq(i).attr("price");
if((price >= min) && (price <= max)){
setAreaColor(area.eq(i),"#901BF3", 0.6);
}
}
}
function setAreaColor(elem,fillColor,fillOpacity){
var data = elem.data('maphilight') || {};
data.fillColor = fillColor;
data.fillOpacity = fillOpacity;
elem.data('maphilight', data).trigger('alwaysOn.maphilight');
}
Он работает. Но очень медленно. То бишь, когда нужно перекрасить областей 5, то работает достаточно шустро, но как только количество областей доходит хотя бы до 20, наблюдаются заметные зависания браузера. А всего у меня таких областей 400.
В результате поиска узкого места, обнаружил, что это функция setAreaColor().
В связи с чем возник вопрос: Как ускорить работу кода? Я вижу два варианта: найти другой способ перекрашивать область, либо найти способ делать это не по одной, а сразу все(сначала сформировать массив со всеми элементами, а потом применить новые настройки заливки сразу ко всем).
Читал официальную документацию , но ответов найти не смог. Может кто сталкивался с данной проблемой и подскажет выход из ситуации?
Сборка персонального компьютера от Artline: умный выбор для современных пользователей