0

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

4 に答える 4

3

関数からオブジェクトを返して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();
    });
});
于 2012-07-23T13:17:21.933 に答える
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();
});
于 2012-07-23T13:12:34.917 に答える
0

「var theSubmitSpinner;」を移動します。関数の外: http://jsfiddle.net/nXbaz/

于 2012-07-23T13:12:38.810 に答える
0 
submitSpinner(true);

スコープにオーバーロードが 1 つあるため、1 つを提供する必要があります。

于 2012-07-23T13:13:55.750 に答える