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

complex857 · Accepted Answer · 2012-07-23 13:17:21Z

3

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

answered Jul 23, 2012 at 13:17

complex857

20.9k6 gold badges54 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Felix Kling Over a year ago

This is a good solution, though it's still a bit strange that the element is created inside createSubmitSpinner and the event handlers are bound outside of it. But I guess we are not talking about perfect code design here ;)

complex857 Over a year ago

well, i admit that it certainly does. (-:

Bergi · Accepted Answer · 2012-07-23 13:18:00Z

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

Piter · Accepted Answer · 2012-07-23 13:12:38Z

0

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

answered Jul 23, 2012 at 13:12

Piter

715 bronze badges

Comments

Andreas Nilsson · Accepted Answer · 2012-07-23 13:13:55Z

0

submitSpinner(true);

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

answered Jul 23, 2012 at 13:13

Andreas Nilsson

2211 silver badge6 bronze badges

Collectives™ on Stack Overflow

Variable scope issue with javascript function

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related