javascript - 学习js遇到的一个小问题

问题描述

问 题

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，关闭定时器，可是结果恰好相反

解决方案

你每次进入循环检测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();
    }

这篇关于javascript - 学习js遇到的一个小问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！