setInterval()与setTimeout()的区别

Posted zhang-jiao

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了setInterval()与setTimeout()的区别相关的知识，希望对你有一定的参考价值。

  • 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>

 

以上是关于setInterval()与setTimeout()的区别的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript中SetInterval与setTimeout的用法详解

SetInterval与setTimeout的区别

setTimeout与setInterval

setTimeout与setInterval对比

第46天：setInterval与setTimeout的区别

setTimeout()与setInterval()