How to reduce repetitive javascript code

Question

Is there anyway I can reduce the repetition below? I have only shown two code blocks but there are and will be many more of the same.

I have tried using arrays and loops, but unfortunately I could not get a working example. Thank you in advance.

E1 = new Audio('audio/E1.ogg');
E1.addEventListener('ended', function() {
  this.currentTime = 0;
  this.play();
}, false);

A1 = new Audio('audio/A1.ogg');
A1.addEventListener('ended', function() {
  this.currentTime = 0;
  this.play();
}, false);

EDIT : Using Jonathan's code below, I am still wondering whether it would be possible to do the equivalent of:

(E1,A1,x,x,x).addEventListener('ended', callback, false);
// I know this bit of code doesn't work

You should leave the original code you had in the question. As it is, the accepted answer is confusing because it looks like exactly what you already had in the question. — David Ly
– David Ly, Commented Jun 27, 2011 at 17:32
@davy8: I am not sure why I never saw this comment, but it definitely makes sense. I have rolled the question back and re-edited so that future answer seekers will be able to easily see what the solution was solving. — tw16
– tw16, Commented Jul 29, 2011 at 15:53

Jonathan Sterling · Accepted Answer · 2011-06-26 01:15:19Z

7

Since your callbacks are the same you can just bind them to a variable:

var E1 = new Audio('audio/E1.ogg');
var A1 = new Audio('audio/A1.ogg');

var callback = function() {
    this.currentTime = 0;
    this.play();
};

E1.addEventListener('ended', callback, false);
A1.addEventListener('ended', callback, false);

answered Jun 26, 2011 at 1:15

Jonathan Sterling

18.4k12 gold badges69 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tw16 Over a year ago

I cannot believe I didn't spot creating a callback variable. I think I must have gotten code blindness from staring at all the other code!

sirbrialliance · Accepted Answer · 2011-06-26 01:17:35Z

2

var files = ['audio/E1.ogg', 'audio/A1.ogg'];
//note that we cannot/should not use for(... in ...) - that won't do what you expect
for(var i = 0; i < files.length; ++i) {
    var audio = new Audio(files[i]);
    audio.addEventListener('ended', function() {
        this.currentTime = 0;
        this.play();
    }, false);
}

answered Jun 26, 2011 at 1:17

sirbrialliance

3,7121 gold badge28 silver badges15 bronze badges

Comments

MikeM · Accepted Answer · 2011-06-27 17:30:07Z

2

something like

var addEndedEvent = function(elem) {
    elem.addEventListener('ended', function() {
        this.currentTime = 0;
        this.play();
    }, false);
}

addEndedEvent(new Audio('audio/A1.ogg'));

edited Jun 27, 2011 at 17:30

answered Jun 26, 2011 at 1:17

MikeM

27.5k4 gold badges67 silver badges80 bronze badges

Comments

WesleyJohnson · Accepted Answer · 2011-06-26 04:18:52Z

0

You should be able to do something like this. If you have more files, just add their name into the array fileNames.

var audioRefs = { }, fileNames = ['E1','A1','B1'], i, file;
for( i = 0; i < fileNames.length; i++ ) {
    file = fileNames[i];
    audioRefs[file] = new Audio('audio/' + file + '.ogg');
    audioRefs[file].addEventListener('ended', callback, false);
}

function callback() {
   this.currentTime = 0;
   this.play();
};

audioRefs will end up looking like....

audioRefs = {
   'A1': (reference to A1 Audio object),
   'B1': (reference to B1 Audio Object)
}

answered Jun 26, 2011 at 4:18

WesleyJohnson

1,5581 gold badge16 silver badges33 bronze badges

Comments

David Ly · Accepted Answer · 2011-06-27 17:36:51Z

0

For the edited question, if you use the each function from Underscore.js you can do the following:

_.each([E1,A1,B1], function(audio) { 
    audio.addEventListener('ended', callback, false); 
});

answered Jun 27, 2011 at 17:36

David Ly

31.7k27 gold badges123 silver badges174 bronze badges

Collectives™ on Stack Overflow

How to reduce repetitive javascript code

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related