javascript 函数的变量作用域问题

我正在尝试使用 spin.js 创建一个函数。该函数加载微调器，然后如果使用它的参数再次调用它，则会停止微调器。我无法获得正确的变量范围。因此，当我调用该函数来停止时，我得到一个未定义的信息submitSpinner.

http://jsfiddle.net/atlchris/tQdZB/1/ 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);
    });
});​

你为什么不归还Spinner函数中的对象，并让调用者在适当的时候调用 .stop() ？读起来更好，而且不必用随机变量污染局部作用域，也使得submitSpinner()更简单。

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