jQuery: function returns undefined where a string should be returned, what's going wrong here?
I am writing a small jQuery plugin to playback small soundbites on a web project and am running into a really strange bug.
For some reason return path;
simply isn't returning the path
(typeof == string
) as it should be instead returns undefined
.
I would really appreciate it if someone could take a look and let me know what I'm doing wrong here, I cannot quite figure it out since I do a console.log(path);
just before the return path;
statement which still shows the correct string, however the variable set to capture this returned value the logs out as undefined
.
I have uploaded the full example here: http://jannisgundermann.com/playground/swiffy/demo/ (please excuse the ugly style of the page, haven't gotten to dressing the code up nicely.)
On the page linked to above, clicking the "Click here to play a sound." <a>
tag will produce the error. Note: there won't be any sound actually playing, this is just a lookup exercise for now so there is no need to turn down the volume of your headphones or speakers.
The direct link to the script in question is this: http://jannisgundermann.com/playground/swiffy/swiffy.js
If you open your console most things should be quite obvious and I've also spend a fair bit of time on just writing intelligent error messages and logs so hopefully the file and its functions will be easy to understand.
Thanks a lot for reading this far, I look forward to your insights and ideas.
Jannis
Update: Code example below, though I'd still recommend checking out the live example because it may be a scope issue that might not apparent 开发者_Python百科in the code below.
// lookup helper that returns the URL to the sound file specified.
function lookup(name) {
if ( !name ) return; // if no name has been passed in assume this is an error and exit quietly.
var success = false; // Boolean to see if a file has been found or not and if needed display an error log.
// cycly through the array of sounds and look for the filename given.
$.each( gs , function(key, val) {
var key = val[0], // holds the filename.
path = val[1]; // holds the compiled href to this file.
if ( key == name ) { // if there is a match
log('Success, we found your file: "'+key+'"\n' +
'We\'re now exiting the lookup function and will be returning its stored path: '+path);
success = true; // boolean to only show this once regardless of the array length.
return path;
}
});
// just in case the specified filename could not be found display an error message.
if ( !success )
log('You seem to be looking for: "'+name+'" which doesn\'t exist in this array.\n' +
'Please make sure there are no typos in the filename and that the file has been\n' +
'loaded into swiffy using the $.swiffy({}) setup method.\n' +
'If you\'re unsure of how to do so, please read the documentation or ask your friend.');
}
// filename in this example == "filename1" and is present in "gs" which is an array holding all sound filenames and their respective pathing information
var soundSource = lookup(filename);
console.log(soundSource);
The return
inside the callback function for $.each
will not make the lookup
function return that value.
Read what the return value is doing in a callback passed to each
:
We can break the
$.each()
loop at a particular iteration by making the callback function returnfalse
. Returning non-false is the same as acontinue
statement in afor
loop; it will skip immediately to the next iteration.
Declare path
in lookup
and return from there (I included only relevant parts of the function):
function lookup(name) {
if ( !name ) return;
var success = false,
path; // <--- declare path here
$.each( gs , function(key, val) {
var key = val[0];
path = val[1];
if ( key == name ) {
success = true;
return false; // stop further iteration
}
});
return path; // <--- return path here
}
精彩评论