javascript函数的可变范围问题

Variable scope issue with javascript function

本文关键字：范围 问题 函数 javascript      更新时间：2024-01-21

我正试图用spin.js创建一个函数。该函数加载微调器，然后如果用它的参数再次调用它，它就会停止微调器。我搞不清变量的作用域。因此，当我调用函数停止时，我在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);
    });
});​

为什么不从函数中返回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();
    });
});

问题出在哪里？正如您已经知道的那样，这是一个范围问题，只需将变量声明移到函数之外，即可使其全局化，并可从所有函数调用中访问。

然而，最好是而不是将其全局化，而是将停止函数（仅从单击处理程序调用）移动到相同的范围：

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

在函数外移动"var SubmitSpinner；"：http://jsfiddle.net/nXbaz/

submitSpinner(true);

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

相关文章：