Variable scope issue with javascript function

Question

I am trying to create a function with spin.js. The function loads the spinner, then if it is called again with it argument, then it stops the spinner. I can't get the variable scope right. So when I call the function to stop, I get an undefined on the submitSpinner .

http://jsfiddle.net/atlchris/tQdZB/1/

function submitSpinner(stopSpinner) {
    var theSubmitSpinner;

    if (stopSpinner === true) {
        theSubmitSpinner.stop();

        $('#overlay').remove();
    }
    else {
        $('body').append('<div id="overlay"><div id="spinner"></div></div>');

        theSubmitSpinner = new Spinner({
            lines: 13,
            length: 15,
            width: 5,
            radius: 20,
            color: '#ffffff',
            speed: 1,
            trail: 60,
            shadow: false
        }).spin(document.getElementById("spinner"));
    }
}

submitSpinner();

$(function() {
    $('#overlay').on('click', function() {
        alert('click');
        submitSpinner(true);
    });
});​

Answer 1

Why don't you return the Spinner object from the function, and let the caller call .stop() on it when its time? Reads better, and it doesn't have to pollute the local scope with random variables, also makes the submitSpinner() simpler.

function createSubmitSpinner() {

    $('body').append('<div id="overlay"><div id="spinner"></div></div>');

    return new Spinner({
        lines: 13,
        length: 15,
        width: 5,
        radius: 20,
        color: '#ffffff',
        speed: 1,
        trail: 60,
        shadow: false
    }).spin(document.getElementById("spinner"));
}


$(function() {
    var spinner = createSubmitSpinner();
    $('#overlay').on('click', function() {
        alert('click');
        spinner.stop();
    });
});

Answer 2

What is the problem? As you already know it is an scope issue, just move the variable declaration outside the function to make it global and accessible from all function calls.

Yet, it might be better not to make it global, but move the stopping function (which is only called from the click handler) into the same scope:

function createSpinner() {
    var overlay = $('<div id="overlay">'),
        spinner = $('<div id="spinner">');
    $('body').append(overlay.append(spinner));
    var submitSpinner = new Spinner({
        lines: 13,
        length: 15,
        width: 5,
        radius: 20,
        color: '#ffffff',
        speed: 1,
        trail: 60,
        shadow: false
    }).spin(spinner);

    overlay.on('click', function() {
        submitSpinner.stop();
        overlay.remove();
    });
}

$(function() {
    createSpinner();
});

Answer 3

Move "var theSubmitSpinner;" outside the function: http://jsfiddle.net/nXbaz/

Answer 4

submitSpinner(true);

因为您的作用域中有一个过载，所以您必须提供一个。