setInterval()与setTimeout()的区别

时间：2024-12-09 20:33:26
  • setInterval()－一旦被开启就会不断的执行，使用clearInterval()清除后将不再执行
  • setTimeout()－又称为一次定时器，定时器开启后只执行一次将不会接着执行，使用clearTimeout()清除后一次也不会执行定时器里面的内容
<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Document</title>

        <style>

           *{

               padding: 0;

               margin: 0;

           }

           body{

               text-align: center;

           }

           #btn1,#btn2{

               margin-top: 100px;

           }

        </style>

    </head>

    <body>

        <button id="btn1">执行多次</button>

        <button id="btn2">执行一次</button>

        <script>

            var btn1=document.getElementById("btn1");

            var btn2=document.getElementById("btn2");

            var timers=null;

            var timer=null;

            //监听按钮点击事件

            btn1.onclick=function(){

            //清除定时器

           　clearInterval(timers);

            //开启定时器

             timers=setInterval(function(){

                 var num=parseInt(Math.random()*3);

                 console.log(num);

             },3000);

            }

            btn2.onclick=function(){

                //清除定时器

                clearTimeout(timer);

                timer=setTimeout(function(){

                    alert("我是一次定时器");

                },2000);

            }

        </script>

    </body>

</html>

相关文章