JavaScript 定时器

最新推荐文章于 2021-02-19 20:52:39 发布

原创最新推荐文章于 2021-02-19 20:52:39 发布 · 677 阅读

0 ·

CC 4.0 BY-SA版权

web 同时被 2 个专栏收录

35 篇文章

订阅专栏

JavaScript

28 篇文章

订阅专栏

定时器：

setlnterval();
setTimeout();
clearlnterval();
clearTimeout();
这四个函数都是全局对象window上的方法，内部函数this指向window

1.setlnterval();定时循环
每隔多长时间（千毫秒）执行一次函数
属性示例:

<script type="text/javascript">
    setInterval(function() {
        console.log('a');
    },1000);        //表示每隔一千毫秒执行一次（一秒）
</script>

下面给出这种赋值的形式，会按照每两秒一次执行吗？

<script type="text/javascript">
    var time = 1000；
    setInterval(function() {
        console.log('a');
    },time);  
    time = 2000；
</script>

是不可行的，因为：执行到time会取一次值，每隔time个时间执行一次这个函数，会多次执行这个函数，但识别这个time只识别一次，所以当初写的多少，它就会认为是多少，后面再改是没有用的，所以会始终按照1秒来执行。

缺点解析：

<script type="text/javascript">
    var firstTime = new Date().getTime();
    setInterval(function) {
        var lastTame = new Date().getTime();
        console.log(lastTime - firstTime);
        firstTime = lastTime;
    },1000);
</script>
//是非常不准的，误差很大

结论：setInterval是非常不准的，这里内部原理非常复杂，不用非得理解，知道误差极大即可。

特性：
1.setInterval是widow上的方法，所以它执行时作用域会上GO里面找
2.每个setInterval都会返回一个特定的数字作为唯一标识。

<script type="text/javascript">
    var timer = setInterval（function(){
    },1000);
    var time2 = setInterval(function(){},2000);
</script>

这里写图片描述
这里我们可以看到在控制台输入timer会返回1，输入timer2会返回2，返回的数字是特定且不相同的。

思考：根据setInterval的定义（每隔多长时间（千毫秒）执行一次参数函数），这个函数的执行是没有终点的，那如果我们想让它在特定的位置停止，该用什么来实现？
这里用clearlnterval();来清除，清除时需要选中，这时我们就可以用特性二（返回特定数字）来进行选中了。

示例：

<script type="text/javascript">
    var i = 0;
    var timer = setInterval（function(){
        console.log(i++);
        if(i>10){
            clearInterval(timer);
        }
    },10);
</script>
// 1 2 3 4 5 6 7 8 9 10

这也是清除定时器的方法。

2.setTimeout();推迟定时执行
推迟到一定的时间之后，再执行这个函数
应用：定时闹钟
类比的：setTimeout();也会返回一个特定的数字作为唯一标识，也需要用clearTimeout()来清除，使用方法和除了作用与setlnterval();不同之外，其余均可以类比使用。

setlnterval和setTimeout都可以这样使用：（”func()”,1000）
比如说：

setlnterval("console.log('a');",1000);

练习题：
计时器，到三分钟停止。

<html>
<head>
    <meta charset="UTF-8">
    <title>Date</title>
    <style type="text/css">
        input{
            border: 1px solid rgba(0,0,0,0.8);
            text-align:right;
            font-size:20px;
            font-weight:bold;
       }
     </style>
</head>
<body>
    minutes:<input type="text" value="0">
    seconds:<input type="text" value="0">
</body>
<script type="text/javascript">
    var minutesNode = document.getElementsByTagName('input')[0];
    var secondsNode = document.getElementsByTagName('input')[1];
    var minutes = 0,
        seconds = 0;        //再重新取两个变量用来计数
    setInterval(function(){
        seconds ++;
        if(seconds == 60) {
            seconds = 0;
            minutes ++;
        }
        secondsNode.value = seconds;
        minutesNode.value = minutes;
        if(minutes == 3){
            clearInterval(timer);   //计数到三分钟的时候停止
        }
    },10)
</script>
</html>