JS基础入门篇（十三）—定时器

时间 2019-12-13

标签基础入门十三定时器栏目 JavaScript 繁體版

原文原文链接

1.定时器

定义：当咱们须要隔一段时间，再执行一段代码。或者每隔一段时间，执行一段代码。咱们能够使用定时器。
使用场景：例如网站轮播图的自动滚动。广告延迟弹出的某些操做css

2.定时器-setInterval

定时器-setInterval基本定义html

setInterval
间隔型定时器：每隔一段时间执行一段代码。
注意：代码通常会重复执行
语法
setInterval（函数，时间间隔）;
eg:
setInterval（fn，20）;指的是每隔20 毫秒执行一段函数
时间间隔的单位：是毫秒（ms）1s = 1000ms
返回值
setInterval（重复执行的代码，时间间隔）;这段代码的返回值是分配定时器一个独有的编号。这个编号跟关闭定时器有关。当你开启不少定时器的时候，你想关闭哪个定时器，就须要知道对应的编号而后关闭。就是每开启一个定时器，会给这个定时器贴一个编号，编号是数字类型的，会由这段代码的返回值传递出编码。

使用举例1—无参函数函数

<script>
        //方式一：函数为匿名函数
        setInterval(function () {
            console.log(1);
        },1000);
        //方式二：有名函数-part1
        function fn() {
            console.log(2);
        }
        setInterval(fn,1000);
        //方式二：有名函数-part2
        function go() {
            console.log(3);
        }
        setInterval("go()",1000);
 </script>

使用举例2—有参函数性能

<script>
        //方式一：有名函数的传参
        function  fn(a,b) {
            console.log(a,b);
        }
        setInterval("fn('c','d')",1000);
        //方式二：匿名函数的传参
        setInterval(function(a,b,c){
            console.log(a,b,c);
        },1000,"a","b","c");
</script>

注意：网站

<script>
        //如下代码只是开了一个定时器，会在1s以后执行这个函数。
        setInterval(function(){
          console.log(1);
        },1000);
        console.log(222);
        console.log(333);
</script>

如下是代码执行结果：先打印222和333。以后1s后打印1.
编码

3.setInterval—轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width:400px;
            height:400px;
            border:2px solid black;
            background: red;
        }
    </style>
</head>
<body>
<div id="box"></div>
<script>
    data=["red","blue","yellow","pink"];
    var box=document.getElementById("box");
    var num=0;
    var L=data.length;
    setInterval(function () {
        num++;
        //L%num的结果永远会小于L，而且是0，1，2，····L-1这样循环的。
        num%=L;
        box.style.backgroundColor=data[num];

    },1000);
</script>
</body>
</html>

自动播放效果，能够点击查看。由于codepen不方便放图片，就用颜色代替spa

4.setInterval—轮播图的中止

css样式我就删除了，直接给出js和html。须要所有代码的能够从连接下面去看。点击连接中的css，html，js均可以查看对应的代码。code

方式一：控制步长来中止轮播图的运动，可是定时器还没关（听语言描述可能有些模糊，直接上代码）
经过步长来控制中止轮播图的运动，点击查看效果htm

<body>
<div id="box"></div>
<button id="stop">中止播放</button>
<script>
    data=["red","blue","yellow","pink"];
    var box=document.getElementById("box");
    var stop=document.getElementById("stop");
    var num=0;
    var step=1;
    var L=data.length;
    setInterval(function () {
        //经过step来控制颜色的转化。
        num+=step;
        num%=L;
        box.style.backgroundColor=data[num];
        //能够从 console.log(1)看出定时器没关闭，就算中止轮播了，依旧不停的打印1.
        console.log(1);

    },1000);
    stop.onclick=function () {
    //让step为0，图片就中止在那个地方。可是定时器没关。
        step=0;
    };
</script>
</body>
</html>

方式二：经过一个变量来控制定时器中函数的执行，可是定时器仍是没关。
经过onoff变量来控制定时器内函数的执行递归

<body>
<div id="box"></div>
<button id="stop">中止播放</button>
<script>
    data=["red","blue","yellow","pink"];
    var box=document.getElementById("box");
    var stop=document.getElementById("stop");
    var num=0;
    //默认为true。
    var onoff=true;
    var L=data.length;
    setInterval(function () {
        //button点击以后，onoff为false，则没法执行
        if(onoff) {
            num++;
            num %= L;
            box.style.backgroundColor = data[num];
        }
        console.log(1);

    },1000);
    stop.onclick=function () {
        //点击以后为false。
        onoff=false;
    };
</script>
</body>
</html>

方式三：经过关闭定时器来中止轮播图的运动。
此方法简洁，不须要添加额外的变量。可是有时候也须要以上两种方法。
直接关闭定时器，点击css，html，js能够查看对应代码

<body>
<div id="box"></div>
<button id="stop">中止播放</button>
<script>
    data=["red","blue","yellow","pink"];
    var box=document.getElementById("box");
    var stop=document.getElementById("stop");
    var num=0;
    var L=data.length;
    //setInterval(）方法返回的是定时器的编号。这个编号是独有的。
    var timer=setInterval(function () {
            num++;
            num %= L;
            box.style.backgroundColor = data[num];
        console.log(1);

    },1000);
    stop.onclick=function () {
        //clearInterval（），经过传入定时器的编号来。关闭定时器
        clearInterval(timer);
    };
</script>
</body>
</html>

5.setInterval—轮播图的中止和开始

方式一：清除定时器，再开启定时器。
清除定时器，再开启定时器。注意：从新开启定时器的时候也要清除前一个定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width:400px;
            height:400px;
            border:2px solid black;
            background: red;
        }
        button{
            width: 100px;
            line-height: 50px;
            background: cornflowerblue;
            color: #fff;
            font-size: 20px;
            border:none;
            margin-top: 10px;
            outline: none;
        }
    </style>
</head>
<body>
<div id="box"></div>
<button id="stop">中止播放</button>
<button id="star">开始播放</button>
<script>
    data=["red","blue","yellow","pink"];
    var box=document.getElementById("box");
    var stop=document.getElementById("stop");
    var star=document.getElementById("star");
    var num=0;
    var L=data.length;
    function move() {
        num++;
        num %= L;
        box.style.backgroundColor = data[num];
    };
    var timer=setInterval(move,1000);
    stop.onclick=function () {
        //clearInterval（），经过传入定时器的编号来。关闭定时器
        clearInterval(timer);
    };
    star.onclick=function () {
        //每次开启定时器的时候，先清除前一个定时器。由于当用户重复点击开始按钮，就会打开多个定时器。
        //因此，每次打开定时器，先清除前一个。
        clearInterval(timer);
        timer=setInterval(move,1000);
    }
</script>
</body>
</html>

方式二：使用变量控制定时器的开始与中止
使用step步长控制定时器的开始与中止

<div id="box"></div>
<button id="stop">中止播放</button>
<button id="star">开始播放</button>
<script>
    data=["red","blue","yellow","pink"];
    var box=document.getElementById("box");
    var stop=document.getElementById("stop");
    var star=document.getElementById("star");
    var num=0;
    var L=data.length;
    var step=1;
    function move() {
        num+=step;
        num %= L;
        box.style.backgroundColor = data[num];
    };
   setInterval(move,1000);
    stop.onclick=function () {
        //中止按钮，step=0
        step=0;
    };
    star.onclick=function () {
        //开始按钮，step=1
        step=1;
    }
</script>

方式三：使用变量从新开始定时器
使用变量从新开始定时器

<body>
<div id="box"></div>
<button id="stop">中止播放</button>
<button id="star">开始播放</button>
<script>
    data=["red","blue","yellow","pink"];
    var box=document.getElementById("box");
    var stop=document.getElementById("stop");
    var star=document.getElementById("star");
    var num=0;
    var L=data.length;
    var isPlay=true;
    function move() {
        num++;
        num %= L;
        box.style.backgroundColor = data[num];
    };
    var timer=setInterval(move,1000);
    stop.onclick=function () {
        clearInterval(timer);
        isPlay=false;
    };
    star.onclick=function () {
        if(!isPlay){//没有在播放就开始定时器
            timer=setInterval(move,1000);
        }
        isPlay=true;//改变状态
    }
</script>
</body>

6.定时器-setTimeout

定时器-setTimeout基本定义

延迟型定时器

隔一段时间执行一段代码（执行一次）

语法：
setTimeout(函数,时间间隔)
好比setTimeout(fn,20)
```
隔（等待）20 毫秒执行一段函数
```
时间间隔的单位：是毫秒（ms）
1s = 1000ms
返回值：定时器惟一的编号
注意：虽然只执行一次，就不执行了。可是仍是要关闭定时器，否则会消耗性能。

1.举例说明
点击查看如下代码效果

<script>
    //隔一秒页面会弹出Hello。
    var timer = setTimeout( function(){
        alert("Hello");
    },1000 );
    //点击页面任何一个位置关闭定时器。
    document.onclick = function(){
        clearTimeout( timer );
    }
</script>

2.使用递归，让setTimeout定时器有setInterval的效果
点击连接查看如下代码效果！！！

<script>
    var timer = 0; 
    function fn(){
        timer = setTimeout( function(){
            console.log(1);
            //继续调用fn，则在控制台还会打印1。
            fn();
        },1000 )
    }
    fn();
    
    document.onclick = function(){
        clearTimeout( timer )
    }
</script>