repeat - How to reduce repetitive javascript code - Stack Overflow

admin管理员组

文章数量:1405170

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

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

• javascript
• repeat

Share Improve this question Follow edited Jul 29, 2011 at 15:42 tw16 asked Jun 26, 2011 at 1:13 tw16tw16 29.6k77 gold badges6464 silver badges6464 bronze badges 2

• 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 Commented Jun 27, 2011 at 17:32
• @davy8: I am not sure why I never saw this ment, 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 Commented Jul 29, 2011 at 15:53

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 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);

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);
}

something like

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

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

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)
}

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); 
});

本文标签： repeatHow to reduce repetitive javascript codeStack Overflow