javascript setInterval等について

Question

function meter(){
var i = 0;
	setInterval(function(){
if(i==0){
i++;
	$('#meter').html("<font color='red'>◼︎</font>);
}else if(i==1){
i++;
	$('#meter').html("<font color='red'>◼︎◼︎</font>");
}else if(i==2){
i++;
	$('#meter').html("<font color='red'>◼︎◼︎◼︎</font>");
}else if(i==3){
i++;
	$('#meter').html("<font color='red'>◼︎◼︎◼︎◼︎</font>");
}else{
var i=0;
	$('#meter').html("<font color='red'>◼︎◼︎◼︎◼︎◼︎</font>");
}
	},1000);
}

上記のようにしても、必ず最後の処理がされてしまいます。
どうすれば、順番に処理されていくのでしょうか？

Comments

[matobaa]

カッコ、引用符の対応がズレていてインデントも適当なんですが、整形してもらえないでしょうか。

Answer 1

if(i==0){ の html 内の文字列が閉じていません。こちらはタイプミスだと思いますが。

現象が起きている原因はelseブロックで var i=0;としてしまっているためです。i=0;にしてください。
javascriptのvarの有効範囲はブロックではなく、function（function内になければ外のfunction...最後にはグローバル変数）なので、elseブロックでvar i=0;としてしまったためにこの関数は変数 iを用意することになってしまいました。
しかしelseブロックにはいるまで、iには誰も値を設定しないため、if(i==0)を実行するタイミングでは i はundefined(未定義)という扱いになってしまっています。そのためどのif文にもマッチせず、elseブロックが実行されています。

関数が呼び出されるたびに、（elseブロックのvarの影響で）iが用意される（そして値はundefined）ために毎回elseブロックしか実行されないような状態になっています。

Comments

[退会済みユーザー]

varを外したらできました！
ありがとうございました

Answer 2

setInterval の if の直前に console.log(i);埋め込んでみましたか？
undefinedになっているはずです。

} else {
    var i = 0;
    // ここで変数 i を宣言したため if で判定する際 i が undefined になっている
    // i = 0; にしてただの代入にする必要がある
 

ついでに言えば、<font>はHTML5で非推奨です。

Comments

[退会済みユーザー]

詳しい説明ありがとうございました

[退会済みユーザー]

あ、fontは非推測なんですね
ご指摘ありがとうございます