JavaScript中的定时器

#转载请留言联系

  • 定时器在javascript中的作用

1、定时调用函数
2、制作动画

  • 定时器的使用 

    setTimeout  只执行一次的定时器 
    clearTimeout 关闭只执行一次的定时器
　　 setTimeout的常见场景： 页面的定时跳转， 定时弹窗

    setInterval  反复执行的定时器
    clearInterval 关闭反复执行的定时器

  • setTimeout

setTimeout(定时执行的函数，定时的时间间隔[毫秒]);      //只能执行一次

示例（打开网页3秒后弹窗)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        setTimeout(func,3000);
        function func(){
            alert("吓你一跳信不信");
        }
    </script>
</body>
</html>

注意：3000表示3000毫秒，即是3秒！

  • setInterval

setInterval(定时执行的函数，定时的时间间隔[毫秒]);      //没隔多久执行一次

示例（每隔0.5秒a进行自加1）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        var a=1;
        setInterval(func,500);
        function func(){
            console.log(a)
            a++;
        }
    </script>
</body>
</html>

  • clearTimeout

清除执行一次的定时器。

示例（别弹窗！）：

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="button" value="3s内按下不会弹窗" id="button">
    <script>
        var ret=setTimeout(func,3000);
        function func(){
            alert("吓死你");
        }
        var box=document.getElementById('button');
        box.onclick=function(){
            clearTimeout(ret)
        }
    </script>
</body>
</html>

  • clearInterval

清除反复执行的定时器。

示例（倒计时，从10开始，倒计到0结束。）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1 id="box">10</h1>
    <script>
        var box=document.getElementById("box");
        var ret=setInterval(func,1000);
        function func(){
            //到0了停止倒计时
            if(box.innerHTML==0){
                clearInterval(ret);
                alert("新年快乐！！！")
            }else{
                //没有到0,继续减
                box.innerHTML=parseInt(box.innerHTML)-1;
            }
        }        
    </script>
</body>
</html>

 

 

 

 

 

 

 

 

posted @ 2018-09-24 18:56  苦瓜爆炒牛肉  阅读(351)  评论(0)  编辑  收藏  举报