Performance issue with javascript loop

Question

I have following code snippet, looping over an object with around 5000 google markers in it. I am changing the visibility of the markers in the loop.

var no_of_levels = 4;
for (j=1; j <= no_of_levels ; j++){

        if (j == lvl_no){

            var lvl = 'level'+lvl_no;

            var visible_level_markers = new Array();
            if (lvl_no == 4){
                visible_level_markers = search_flag ?  search_visible_markers['region']: map_sel_regions;
            }else if (lvl_no == 3){
                visible_level_markers = search_flag ?  search_visible_markers['sub']: map_sel_subregions;
            }else if (lvl_no == 2){
                visible_level_markers = search_flag ?  search_visible_markers['switches']: map_sel_switches;
            }

            if (obj.all_level_markers[lvl] != null || obj.all_level_markers[lvl] != undefined){
                for (var i=0; i < obj.all_level_markers[lvl].length ; i++){
                    if (!obj.all_level_markers[lvl][i].getVisible()){
                        var marker_name = obj.all_level_markers[lvl][i].customInfo.split(" : ")[1];
                        if (lvl_no != 1 && $.inArray(marker_name, visible_level_markers)  < 0) {continue;}
                        obj.all_level_markers[lvl][i].setVisible(true);
                    }
                }
            }
        }
        else{
            var lvl = 'level'+j;
            if (obj.all_level_markers[lvl] != null || obj.all_level_markers[lvl] != undefined){
                for (var i=0; i < obj.all_level_markers[lvl].length ; i++){
                    if (obj.all_level_markers[lvl][i].getVisible()){
                        obj.all_level_markers[lvl][i].setVisible(false);
                    }
                }
            }
        }
    }

In IE8 the browser just stops the execution. Gives stop script error. Anyone has the better solution to replace loop or other way?

score 0 · Answer 1 · edited May 23 '17 at 10:26

0

Better use Break and continue to make loop bit shorter. You can try here for the solution.

edited May 23 '17 at 10:26

Community

1
1

answered Nov 10 '14 at 07:49

Gopichandar

2,742
2
24
54

score 0 · Answer 2 · edited May 23 '17 at 12:27

0

The main issue I see here is the getVisible/setVisible which you call inside the loop.

Find some simpler ways to get/set the visibility.

The following posts discuss this. Google Maps V3: Check if marker is present on map? How to find all the the markers which are currently visible on Google Maps V3?

edited May 23 '17 at 12:27

Community

1
1

answered Nov 10 '14 at 08:22

Rajan Panneer Selvam

1,279
10
24

score 0 · Answer 3 · answered Nov 10 '14 at 08:57

Some minor changes that could speed this up are the use of variables for objects that are being accessed frequently e.g.

var currentLevel = obj.all_level_markers[lvl]; 
var currentLevelItem = currentLevel[i];

You could also use length caching in the for loops i.e.

for(var i = 0, len = currentLevel.length; i < len; i++)

score 0 · Answer 4 · answered Nov 18 '14 at 06:00

I solved the issue by breaking the for loop into chunks. Replacing

for (var i=0; i < obj.all_level_markers[lvl].length ; i++){

with

chunk(visible_level_markers.concat(), 1000, true);

function chunk(array, count, action){
if(array != null && typeof(array) != 'undefined'){
    while(count){
        var item = array.shift();
        if(global_all_markers[item] != null && typeof(global_all_markers[item]) != 'undefined') {
            global_all_markers[item].setVisible(action);
        }
        count--;
        if (array.length > 0 && count == 0 ){
            setTimeout(chunk, 100, array, 1000, action);
        }
    }
}
}

This way the browser will only process a loop of 1000 records at a time.

Thanks all.

Performance issue with javascript loop

4 Answers4