search

Home  >  Q&A  >  body text

javascript - Interval速度叠加问题

问题一：为什么要定义var time变量。
问题二：每次点击rand按钮为什么会出现速度的叠加问题。
谢谢。

<body>
<button id="red" onclick="change(this)">red</button>
<button id="green" onclick="change(this)">green</button>
<button id="blue" onclick="change(this)">blue</button>
<button id="rand" onclick="change(this)">rand</button>
<button id="stop" onclick="change(this)">stop</button>

    <script>
        //定义定时器变量
        var time = null;
        function change(args){
            console.log(args);
            if(args.id == 'rand'){
                clearInterval(time);
                time = setInterval(function(){                                          
                    document.body.style.backgroundColor = 'rgb('+ Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+')';
                },1000);
            }else if(args.id == 'stop'){

                clearInterval(time);
            }else{
                document.body.style.backgroundColor = args.id;
            }
        }


    </script>


</body>
PHP中文网PHP中文网2819 days ago385

reply all(1)I'll reply

  • PHP中文网

    PHP中文网2017-04-10 14:55:38

    定义一个全局变量time，是为保存后续定时器的引用，这样才可以清除定时器，如果不需要清除当然可以不定义

    至于你说的叠加问题是什么意思，每次执行rand都会清除之前的定时器，不会产生叠加的，你可以在setInterval方法里打印下执行的时间戳就知道了

    reply
    0
  • Cancelreply