Question

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

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

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

Answer 2

有什么问题？如您所知，这是一个范围问题，只需将变量声明移到函数外部，使其成为全局函数并可从所有函数调用中访问。

然而，将它变为全局可能更好，但是将停止函数（仅从点击处理程序调用）移动到同一范围内：

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 3

移动“var theSubmitSpinner;”功能之外：http://jsfiddle.net/nXbaz/

Answer 4

submitSpinner(true);

因为您的范围内有一个重载，所以您必须提供一个。

javascript函数的变量范围问题

4 个答案: