javascript - jQuery - グローバル変数

Question

別の関数で変数を使用しようとしています。グローバル変数を設定したいです。それを行う方法はありますか？

私はこのようなものが欲しい：

$('.bar1').animate({'height':'10' + "%"},1500, function() {  
    var bar1_height = $(".bar1").height() * 0.5;  
});

変数を別の場所で使用しますbar1_height。

Answer 1

bar_height関数の外で宣言します。

var bar1_height;
$('.bar1').animate({'height':'10' + "%"},1500, function() {
    bar1_height = $(".bar1").height() * 0.5;
});

これにより、グローバルに (つまり、関数の内外で) アクセスできるようになります。

MDNから:

関数の外で変数を宣言すると、その変数は現在のドキュメント内の他のコードで使用できるため、グローバル変数と呼ばれます。関数内で変数を宣言すると、その関数内でのみ使用できるため、ローカル変数と呼ばれます。

Answer 2

$('.bar1').animate({'height':'10' + "%"},1500, function() {  
    window.bar1_height = $(".bar1").height() * 0.5;  
});

終わり。

または、より理想的な方法

var bar1_height;
$('.bar1').animate({'height':'10' + "%"},1500, function() {  
    bar1_height = $(".bar1").height() * 0.5;  
});

Answer 3

JavaScriptの最悪の側面の1 つは、暗黙のグローバル スコープです。varキーワードを削除するだけで、変数をグローバルにすることができます。

$('.bar1').animate({'height':'10' + "%"},1500, function() {  
   bar1_height = $(".bar1").height() * 0.5;  
});

しかし、これは非常に 悪い 習慣と考えられています。例えば：

var getAddress = function(street, city, country) {
    location = street + ', ' + city + ', ' + country;
    return location;
}
getAddress('Holborn', 'London', 'England');

恐ろしいバグを見つけることができますか? jsFiddle .

可能な限り狭いスコープで変数を宣言する必要があります。そうしないと、グローバル変数が混乱して混乱することになります。関数の内側と外側の両方に変数が必要な場合は、それを外側のスコープで宣言するだけです（他の回答が言っているように）：

(function () {
    var bar1_height;

    $('.bar1').animate({'height':'10' + "%"},1500, function() {
        // Use variable from outer scope  
        bar1_height = $(".bar1").height() * 0.5; 
    }); 

    // Variable still has its value here
    alert(bar1_height);
})();

(ここでの不思議な外部関数は、変数が真にグローバルになるのを防ぐことです。)

このブログ投稿は、変数のスコープに関するベスト プラクティスを理解するのに非常に役立ちます。