Recycle for loop?

Question

I have the following situation:

var count = something.length;

google.maps.event.addDomListener( div, 'click', function( event ) {
   for( a = 0; a < count; a++ ) {
     // action 1
   }
});
google.maps.event.addDomListener( div, 'mouseover', function( event ) {
   for( a = 0; a < count; a++ ) {
     // action 2 
   } 
});

google.maps.event.addDomListener( div, 'mouseout', function( event ) {
   for( a = 0; a < count; a++ ) {
     // action 3
   }
});

I have several situations like this and I seem to have too many loops in total.

As you can see, all loops loop through same array but actions are different.

Could I solve similar situation with only 1 for loop / recycle the looping?

Well you certainly can, but I assume actions 1,2 and 3 are different so it would end up more inefficient and messy to try and extract the loops. — Rhumborl, Jan 18 '16 at 14:11
Please tidy up the code to remove excess whitespace. Also consider reading about the methods on `Array` (e.g. [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)) — dan-man, Jan 18 '16 at 14:35
@dan-man I will minify all my `JS` when Im done. I just keep copy of unminified code for improvements / changes. I find code like this much easier to read. — Solo, Jan 18 '16 at 14:40
@Solo - what you do in your code is your business, but when posting on SO please remove excess whitespace. — dan-man, Jan 18 '16 at 14:42

Yuval Perelman · Accepted Answer · 2016-01-19T14:22:25.243

not sure what you meant by "recycle" the loop but that looks like a nicer code. i dont see anything to gain here by combining all the loops together

var count = something.length;
function loopFunc(action){
   for( a = 0; a < count; a++ ) {
        action();
   }
}
function addMapLoopEvent(eventName,action){
   google.maps.event.addDomListener( div, eventName, function( event ) {
        loopFunc(action)
    });
}

addMapLoopEvent('click', action1));
addMapLoopEvent('mouseover', action2));
addMapLoopEvent('mouseout', action3));

score 1 · Answer 2 · answered Jan 18 '16 at 14:16

You can do something like this:

var count = something.length;

function customCallback(callback) {
    for( var a = 0; a < count; a++ ) {
        if(typeof callback == 'function') {
            callback();
        }

        console.log(count + ' => ' + a)
    }
}

function someAction(msg) {
    console.log(msg);
}

google.maps.event.addDomListener( div, 'click', function( event ) {
    customCallback(); // will output your console.log from customCallback function
});

google.maps.event.addDomListener( div, 'mouseover', function( event ) {
    customCallback(someAction); // will output your console.log from someAction function (undefined) and customCallback function console.log
    customCallback(someAction('hi')); // will output your console.log from someAction function ("hi") and customCallback function console.log
});

google.maps.event.addDomListener( div, 'mouseout', function( event ) {
    customCallback(function(event) {
        console.log('Do something awesome.');
        event.preventDefault();
    }); // will output your console.log from someAction function (undefined) and customCallback function console.log
});

score 1 · Answer 3 · edited May 23 '17 at 12:07

It would only be efficient to combine the loops if they were happening, more or less, at the same time:

for (a=1;a<10;a++) {
   // action a
}
for (b=1;b<10;b++) {
   // action b
}

becomes:

for (a=1;a<10;a++) {
   // action a
   // action b
}

That is not the case here. You have three different events which are mutually exclusive. As long as the actions are very different -- meaning there's not much repeated code -- there is no advantage to combining them. In fact, it would probably be a disadvantage in terms of readability.

Further complicating the problem is that, unlike jQuery's on method, vanilla JS can't pass more than one event type at a time to addDomListener. So you'd have to write a custom loop to split up the event string, then test the event.type to run the appropriate loop, further complicating your code without a clear benefit.

Daniel PurPur · Answer 4 · 2016-01-18T14:51:06.217

0

put it in a function and reuse it by calling the function with variable passed to the function.

if you are using jQuery you can add multiple events by adding space in between like: 'click mouseover mouseout'

function action1(){
    //some code for action 1
}
function action2(){
    //some code for action 2
}
function action3(){
    //some code for action 3
}

Function loopingAround(count, action){   
    for( a = 0; a < count; a++ ) {
        action();    
    }

}

google.maps.event.addDomListener( div, 'click mouseover mouseout', function( event ) {

    if(event == 'click'){
        action = action1;
    }
    if(event == 'mouseover'){
        action = action2;
    }
    if(event == 'mouseout'){
        action = action3;
    }

    loopingAround(count, action);
})

edited Jan 18 '16 at 14:51

answered Jan 18 '16 at 14:10

Daniel PurPur

519
3
13

1

Could you add an example to illustrate your suggestion? – Richard Ev Jan 18 '16 at 14:11
@Richard .. Check the answer again I have updated the answer – Daniel PurPur Jan 18 '16 at 14:29
Wouldn't they need to pass the `action` in to the `loopingAround` method? – Richard Ev Jan 18 '16 at 14:30
if action is different in each case create a separate function for each action and call it within the if statement. I will edit the answer in a min. – Daniel PurPur Jan 18 '16 at 14:33

Recycle for loop?

4 Answers4