开发者

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 return false. Returning non-false is the same as a continue statement in a for 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
}
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜