setIntervalの挙動で勘違いしていたこと

setIntervalを単なる時間区切りループ的なものと認識していたらつまづいた話。（初心者丸出し）
※コードはjQueryで書いています

以下のコード、
「start」→「roop:0」→…「roop:4」→「end」
と動くのかと思ったら、
「start」→「end」→「roop:0」→…「roop:4」
だった。

$(function(){
    console.log("start");

    var i = 0;
    var timer = setInterval(function(){
        console.log("roop:" + i);
        i ++;
        if (i >= 5){
            clearInterval(timer);
        }
    }, 500);

    console.log("end");
});

setIntervalはざっくり言うと「インターバルタイマーをセットする処理」。
タイマーをセットするだけのおしごとなので、
セットし終わったらその実行がどうとか関係なく次の処理に移ります。
うーんなるほど…。
ループ的に使いたければ、clearIntervalしている部分にその後実行したい処理を書く必要があるわけですね。

$(function(){
    console.log("start");

    var i = 0;
    var timer = setInterval(function(){
        console.log("roop:" + i);
        i ++;
        if (i >= 5){
           console.log("end");
            clearInterval(timer);
        }
    }, 500);
});

参考文献
setIntervalとsetTimeoutを調べた結果余分なことになった - 三等兵