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