学习js遇到的一个小问题

Question

window.onload=function(){

    function test(){

        var flag=true;

        var timer=null;

        timer=setInterval(function(){

            for(var i=0;i<=8;i++){

                document.getElementById('box').innerHTML+="------"+i+'---------'+'<br>';

                if(i != 8){         //8不等于8 执行 导致定时器关闭不了

                    flag=false;

                }

                if(flag){

                    clearInterval(timer);

                    console.log('执行到了');

                }

                document.getElementById('box').innerHTML+=i+'---'+flag+'<br>';

            }

        },300);

    }

    test();

    }

   

    <div id="box" style="background: orange;width: 200px;height: 200px;"></div>

    

为什么会出现这种问题？按理说8会等于8,不会执行flag=false; 于是false为true，关闭定时器，可是结果恰好相反