javascript - 学习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();
    }
   
    <p id="box" style="background: orange;width: 200px;height: 200px;"></p>
    

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

Answer 1

你每次进入循环检测i是不是8，i不是8那么就把flag设置为false，那么请问i等于8的时候，你得把flag设置回true的代码在哪？

i为8的时候，flag的值还是i为7时候的false

    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;
                    }else{
                        flag=true;
                    }
                    if(flag){
                        clearInterval(timer);
                        console.log('执行到了');
                    }
                    document.getElementById('box').innerHTML+=i+'---'+flag+'<br>';
                }
            },300);
        }
        test();
    }

Answer 2

flag变量声明的位置有问题，修改为下面这样就可以了

var timer=null;
var count = 0;
timer=setInterval(function(){
    console.log('第' + count++ + '次执行');
    for(var i=0;i<=8;i++){
        var flag=true;// 这里修改了
        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);

执行结果

Answer 3

当i等于0时，flag的值就已经被改为flase了，以后循环，flag一直是flase

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;
            }
            else{
                flag=true;
            }
            if(flag){
                clearInterval(timer);
                console.log('执行到了');
            }
            document.getElementById('box').innerHTML+=i+'---'+flag+'<br>';
        }
    },300);
}
test();
}