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 varia

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

submitSpinner(true);

Because you have one overload in your scope so you must provide one.

Answer 3

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 4

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