использование jQuery maphilight

513
07 февраля 2017, 21:50

Доброго времени суток всем! Использую для одного из проектов данный плагин и столкнулся с некоторыми сложностями. Мне понадобилось организовать поиск по тегу 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().

В связи с чем возник вопрос: Как ускорить работу кода? Я вижу два варианта: найти другой способ перекрашивать область, либо найти способ делать это не по одной, а сразу все(сначала сформировать массив со всеми элементами, а потом применить новые настройки заливки сразу ко всем).

Читал официальную документацию , но ответов найти не смог. Может кто сталкивался с данной проблемой и подскажет выход из ситуации?

READ ALSO
зачем нужен fetch?

зачем нужен fetch?

советуют его применять вместо $ajax()

489
Маска ввода телефона из нескольких input

Маска ввода телефона из нескольких input

Как организовать такую маску ввода?

709
Как &ldquo;перезапустить&rdquo; owl carousel после ajax запроса?

Как “перезапустить” owl carousel после ajax запроса?

Суть в том, что я динамически подгружаю или убираю элементы из слайдера с помощью ajaxКак после очередного запроса "перезапустить" карусель,...

688
Прогрессивная загрузка ajax

Прогрессивная загрузка ajax

Есть php-скрипт, который обращается к API и получает от него данные на протяжении 5-10 секундМожно ли как-то загружать эти данные по мере получения...

446