定时器 setTimeout与setInterval的用法

2021-10-07 17:33:45 阅读：210 来源： 互联网

标签：function 定时器 console 函数 setInterval clearInterval setTimeout

一、setTimeout（）方法（setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。）；

 <script>
        function f1(){
            console.log('蒙多觉得你很帅！')
        }
        

        // 一次性定时器
            // 两个参数，第一个参数是函数(可以填命名函数的函数名，还可以填匿名函数)，第二个参数是数值（毫秒数）
        setTimeout(f1,3000);


        // 函数传一个匿名函数
        setTimeout(function(){
            console.log('匿名函数')
        },5000);
    </script>

二、setInterval（）方法

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

如果你只想执行一次可以使用 setTimeout() 方法。

<script>
        function f1(){
            console.log('蒙多觉得你很帅！')
        }
        

        // 一次性定时器
            // 两个参数，第一个参数是函数(可以填命名函数的函数名，还可以填匿名函数)，第二个参数是数值（毫秒数）
        setInterval(f1,1000);


        // 函数传一个匿名函数
        setInterval(function(){
            console.log('蒙多想去哪儿就去哪儿！');
        },1500);

        
    </script>

三、删除定时器

  <input type="button" value="开始计时" id="goon">
    <input type="button" value="停止计时" id="stop">
    <script>
        var num=10;
        var timeId=setInterval(function(){
            num--;
            console.log(num);
            // //归零的时候清除定时器
            // if(num==0){
            //     clearInterval(timeId);
            // }
        },1000);


        // 按钮清除定时器
        $('#stop').click(function(){
            //清除定时器 clearInterval
            clearInterval(timeId);
        })

        // 按钮继续执行定时器
        $('#goon').click(function(){
            // 添加定时器之前，防止意外，多添加了，一般来说会先清除一次定时器
            clearInterval(timeId);
            timeId=setInterval(function(){
                num--;
                console.log(num);
            },1000);
        })

    </script>

标签：function,定时器,console,函数,setInterval,clearInterval,setTimeout
来源： https://blog.csdn.net/CHENww_/article/details/120638689

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

定时器 setTimeout与setInterval的用法