定时器 setTimeout与setInterval的用法

一、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>

上一篇:requestAnimationFrame 真的就比 setInterval setTimeout 好吗?


下一篇:jQuery轮播图